Apa artinya layar @media dan (maks-lebar: 1024px) di CSS?

245

Saya menemukan potongan kode ini dalam file CSS yang saya warisi, tetapi saya tidak dapat memahaminya:

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

Secara khusus, apa yang terjadi pada baris pertama?

css media-queries Yarin
sumber

Jawaban:

306

Itu permintaan media. Ini mencegah CSS di dalamnya dijalankan kecuali browser melewati tes yang dikandungnya.

Tes dalam permintaan media ini adalah:

  1. @media screen- Browser mengidentifikasi dirinya sebagai kategori "layar". Ini kira-kira berarti browser menganggap dirinya kelas desktop - sebagai lawan dari misalnya browser ponsel yang lebih lama (perhatikan bahwa iPhone, dan browser ponsel cerdas lainnya, memang mengidentifikasi diri mereka sebagai dalam kategori layar), atau pembaca layar - dan bahwa itu menampilkan halaman di layar, daripada mencetaknya.

  2. max-width: 1024px- lebar jendela browser (termasuk bilah gulir) adalah 1024 piksel atau kurang. ( CSS piksel, bukan piksel perangkat .)

Tes kedua menyarankan ini dimaksudkan untuk membatasi CSS ke iPad, iPhone, dan perangkat serupa (karena beberapa browser lama tidak mendukung max-widthpermintaan media, dan banyak browser desktop dijalankan lebih lebar dari 1024 piksel).

Namun, itu juga akan berlaku untuk windows browser desktop dengan lebar kurang dari 1024 piksel, di browser yang mendukung max-widthpermintaan media.

Berikut spesifikasi Media Queries, cukup mudah dibaca:

Paul D. Waite
sumber
jika lebar layar saya di atas 1200px cara menentukan di layar
@media
2
Anda cukup menggunakan (min-width: 1200px) alih-alih menggunakan max-width, atau Anda bisa menjadikannya sebagai CSS biasa tanpa kueri media dan menggunakan 'max-width' untuk menimpa ini ketika masuk ke perangkat yang lebih kecil
MintWelsh
Apakah ada cara untuk memengaruhi penataan hanya pada desktop (BUKAN seluler sama sekali) saat Anda mengubah ukuran viewport? Jadi jika saya mengubah ukuran browser saya menjadi 'lebar 720px lebar secara manual', itu akan menggunakan pernyataan media yang mendeteksi Anda di desktop bukan seluler, dan Anda sekarang berada di bawah 720px misalnya?
wharfdale
@ JordanC26: sepertinya Anda mengajukan pertanyaan, dan untuk itu Anda ingin tombol "Ajukan Pertanyaan" di dekat sudut kanan atas layar. Sebelum Anda menggunakannya, Anda mungkin ingin mendefinisikan apa yang Anda maksud dengan "desktop" dan "mobile". Apakah Microsoft Surface mobile, atau desktop? Mengapa? Bagaimana dengan perangkat masa depan yang belum ditemukan?
Paul D. Waite
55

Ini membatasi gaya yang ditentukan di sana untuk layar (misalnya tidak mencetak atau media lain) dan selanjutnya membatasi ruang lingkup untuk viewports yang 1024px atau kurang lebarnya.

http://www.css3.info/preview/media-queries/

Chris Bentley
sumber
10

Dikatakan: Ketika halaman ditampilkan di layar dengan resolusi maksimal 1024 piksel maka terapkan aturan yang mengikutinya.

Seperti yang mungkin sudah Anda ketahui sebenarnya Anda dapat menargetkan beberapa CSS ke jenis media yang dapat berupa perangkat genggam, layar, printer, dan sebagainya.

Lihat detailnya di sini ..

Lorenzo
sumber
3
Saya tidak akan membuat asumsi bahwa dia tahu itu.
jcolebrand
6

Dalam kasus saya, saya ingin memusatkan logo saya di situs web ketika browser memiliki 800pxatau kurang, maka saya melakukan ini dengan menggunakan @mediatag:

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

Ini berhasil untuk saya, semoga seseorang menemukan solusi ini bermanfaat. :) Untuk informasi lebih lanjut, lihat ini .

kamuny
sumber
1

Ini berarti jika ukuran layar 1024 maka hanya berlaku di bawah aturan CSS.

Kumar Nitesh
sumber
1

Jika kondisi permintaan media Anda benar, maka CSS Anda dengan kondisi itu akan berfungsi. Itu berarti CSS dalam ukuran piksel kondisi kueri media Anda akan berpengaruh, atau jika kondisinya gagal itu berarti jika lebar perangkat lebih besar dari 1024px daripada CSS Anda tidak akan berfungsi. Karena kondisi kueri media Anda salah.

max-width adalah batas maksimum CSS Anda sampai selebar itu.

Anup
sumber
0

Juga patut dicatat Anda dapat menggunakan 'em' dan 'px' - blog dan situs berbasis teks melakukannya karena browser membuat keputusan tata letak yang lebih relatif terhadap konten teks.

Di Wordpress twentysixteen saya ingin tagline saya ditampilkan di ponsel dan juga di desktop, jadi saya memasukkan ini ke theme style anak saya.

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}
MattB
sumber
0

Ini menargetkan beberapa fitur tertentu untuk menjalankan beberapa kode lain ...

Sebagai contoh:

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;

  }

cuplikan di atas mengatakan jika perangkat yang menjalankan program ini memiliki layar dengan lebar 600px atau kurang dari 600px, dalam hal ini program kami harus menjalankan bagian ini.

Shahin Ghasemi
sumber