Bagaimana Saya Boleh Membuat Pertanyaan Media Lebar Min dengan Betul?

Meratakan Kekhususan CSS dengan Pertanyaan Media Lebar Min

Apabila mereka bentuk tapak web, amalan biasa menggunakan prinsip reka bentuk web responsif, termasuk pendekatan diutamakan mudah alih. Ini memerlukan penggunaan pertanyaan media lebar min untuk menyasarkan peranti dengan saiz skrin tertentu. Walau bagaimanapun, ia boleh mengelirukan apabila menulis ganti nilai CSS untuk peleraian skrin yang lebih tinggi, kerana lebar min yang lebih rendah nampaknya diutamakan.

Ini kerana pertanyaan media dinilai mengikut susunan daripada paling terhad kepada paling terhad. Dalam contoh yang disediakan:

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

Kedua-dua pertanyaan media adalah benar apabila lebar skrin ialah 600px atau lebih besar. Walau bagaimanapun, peraturan kedua berlaku kemudian dalam lata, jadi ia diutamakan dan saiz fon 1.7em yang lebih kecil digunakan.

Penyelesaian

Untuk menulis ganti pengisytiharan dengan lebih tinggi dengan berkesan resolusi menggunakan lebar min tanpa menggunakan pemilih yang lebih kuat atau lebar maksimum, anda boleh menukar susunan media anda pertanyaan:

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

Ini memastikan saiz fon yang lebih besar digunakan apabila lebar skrin sekurang-kurangnya 600px. Ini akan memberi anda kekhususan melata yang anda jangkakan, dengan lebar min yang lebih tinggi diutamakan.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membuat Pertanyaan Media Lebar Min dengan Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!