@Media min-genişlik ve max-genişlik


225

Bu @mediakurulum var:

HTML :

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

CSS :

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

Bu kurulumla iPhone'da çalışır, ancak tarayıcıda çalışmaz.

Çünkü zaten devicemeta var ve belki de var max-width:480px?


1
Sorun nedir - Varsayılan stiller 769 pikselden daha geniş ekranlar için geçerli olacaktır.
Gurpreet Singh

sadece @media screen and (min-width:769px){normal tarayıcı stillerinizi kaldırın
Zoltan Toth

Ne demek Zoltan? Ve sanırım çözebilirim. İlk olarak, sorun tarayıcımı maksimum cihazla yeniden boyutlandırdığımda, telefonda çalıştı, ancak broswer'da değil, her ikisinde de "cihaz" olmadan çalıştı.
rallybilen

Yani temelde "cihaz" ile hem mobil / tarayıcıda çalışır ama cihaz eklediğimde tarayıcıda göremiyorum \
rallybilen

1
O olmalı 980pxdeğil 960tarayıcı boyutu uçlarında çünkü en 980px.

Yanıtlar:


339

En iyi yöntem, eski tarayıcılar için varsayılan CSS yazmak, yani 5.5, 6, 7 ve 8 gibi eski tarayıcılar yazmak olduğunu buldum. @Media okuyamıyorum. @Media kullandığımda şöyle kullanıyorum:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Ancak @media ile istediğiniz her şeyi yapabilirsiniz. Bu, tüm tarayıcılar için stiller oluştururken benim için en iyi bulduğum şeyin sadece bir örneğidir.

iPad CSS özellikleri.

Ayrıca! Yazdırılabilirlik arıyorsanız,@media print{}


16
Neden 'mac' ekranlarını yerleştirdiniz? Büyük yüksek çözünürlüklü ekranlara sahip olabilecek sadece "şaşırtıcı" Mac'ler değil!
Luke

38

Temel sorun max-device-widthvs eski düz kullanıyor max-width.

"Aygıt" anahtar kelimesinin kullanılması, tarayıcı penceresinin genişliğini değil ekranın fiziksel boyutunu hedefler.

Örneğin:

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

Karşı

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}

11

Web sitesi masaüstü ekranı gibi küçük cihazlarda davranıyorsa, bu meta etiketi daha önce başlığa koymanız gerekir

<meta name="viewport" content="width=device-width, initial-scale=1">

Medya sorguları için bunu şu şekilde ayarlayabilirsiniz:

bu, tüm mobil / cep telefonu genişliklerinizi kapsayacaktır

    @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //

    }

İPad ve iPad pro için şunları kullanmalısınız:

    @media only screen and (min-width: 768px) and (max-width: 1024px)  {
    //Put your CSS here for 768px to 1024px width devices(covers all iPad portrait width //

    }

Yatay mod için css eklemek istiyorsanız bunu ekleyebilirsiniz

ve (yönlendirme: manzara)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : landscape) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile landscape width //

        }

8

Nitelik için doğru değer contentşunları içermelidir initial-scale:

<meta name="viewport" content="width=device-width, initial-scale=1">
                                                   ^^^^^^^^^^^^^^^


2
Nedenini açıklayabiliyor ve referans ekleyebiliyorsanız, bu cevap daha yararlı olacaktır.
Michael Benjamin

2
@Michael_B Başlangıçtaki 'user-scalable = no' idi. Tüm düşündüğüm bunu söylüyor.
Apolo Radomer

0

bazı iPhone'lar için görünümünüzü böyle koymanız gerekir

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.