@Media min-width & max-width

225

Saya memiliki @mediapengaturan ini :

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 */
}

Dengan pengaturan ini berfungsi pada iPhone tetapi tidak berfungsi di browser.

Apakah itu karena saya sudah memiliki devicemeta, dan mungkin max-width:480pxsebaliknya?

css mobile media-queries

— relibilen
sumber

1

Masalahnya - Gaya default akan berlaku untuk layar yang lebih lebar dari 769 px.

— Gurpreet Singh

hapus saja @media screen and (min-width:769px){gaya peramban normal Anda

— Zoltan Toth

Apa maksudmu Zoltan? Dan saya pikir saya mungkin menyelesaikannya. Pertama, masalahnya adalah ketika saya mengubah ukuran browser saya dengan max-perangkat-dengan itu bekerja di telepon tetapi tidak di broswer, tanpa "perangkat" itu berfungsi di keduanya.

— rallybilen

Jadi pada dasarnya tanpa "perangkat" itu berfungsi di kedua ponsel / browser tetapi ketika saya menambahkan perangkat saya tidak bisa melihatnya di browser \

— rallybilen

1

Seharusnya 980pxbukan 960karena ukuran browser berakhir pada 980px.

339

Saya telah menemukan metode terbaik adalah menulis CSS default Anda untuk browser lama, seperti browser lama termasuk yaitu 5.5, 6, 7 dan 8. Tidak dapat membaca @ media. Ketika saya menggunakan @ media saya menggunakannya seperti ini:

<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>

Tetapi Anda dapat melakukan apa pun yang Anda suka dengan @media Anda, Ini hanyalah contoh dari apa yang saya temukan terbaik untuk saya ketika membangun gaya untuk semua browser.

Spesifikasi CSS iPad.

Juga! Jika Anda mencari kemampuan cetak yang dapat Anda gunakan@media print{}

— bashleigh
sumber

16

Mengapa Anda memasang layar 'mac'? Bukan hanya Mac yang "luar biasa" yang dapat memiliki layar resolusi tinggi yang besar!

— Luke

38

Masalah mendasarnya adalah menggunakan max-device-widthvs biasa max-width.

Menggunakan kata kunci "perangkat" menargetkan dimensi fisik layar, bukan lebar jendela browser.

Sebagai contoh:

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

Melawan

@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.  */
}

— jpostdesign
sumber

11

Jika situs web pada perangkat kecil berperilaku seperti layar desktop maka Anda harus memasukkan meta tag ini ke header sebelumnya

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

Untuk kueri media, Anda dapat menetapkan ini sebagai

ini akan mencakup semua lebar ponsel / ponsel Anda

    @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 //

    }

Untuk iPad dan iPad pro yang harus Anda gunakan

    @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 //

    }

Jika Anda ingin menambahkan css untuk mode Lansekap Anda dapat menambahkan ini

dan (orientasi: lanskap)

  @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 //

        }

— Rohit Kaushik
sumber

8

Nilai yang benar untuk contentatribut seharusnya termasuk initial-scale:

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

Luaskan cuplikan

— Ksenia Titova
sumber

2

Jika Anda bisa menjelaskan alasannya dan menambahkan referensi, itu akan membuat jawaban ini lebih bermanfaat.

— Michael Benjamin

2

@Michael_B Yang awalnya adalah 'user-scalable = no'. Itu yang mengatakan semua yang saya pikirkan.

— Apolo Radomer

0

untuk beberapa iPhone Anda harus meletakkan viewport Anda seperti ini

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />

— NuggaN85
sumber