Sintaks pelbagai pertanyaan media CSS baru

<p> Ciri -ciri baru sintaks skop pertanyaan media CSS: Reka bentuk web yang lebih ringkas dan responsif </p> <p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174156973483540.jpg" class="lazy" alt="The New CSS Media Query Range Syntax "> <s> </s></p> CSS Media Query adalah alat utama untuk memilih dan menetapkan gaya elemen berdasarkan keadaan tertentu. Keadaan ini berbeza -beza, tetapi biasanya dibahagikan kepada dua kategori: (1) jenis media yang digunakan, dan (2) fungsi khusus penyemak imbas, peranti, dan juga persekitaran pengguna. <p> </p> Sebagai contoh, untuk menggunakan gaya CSS tertentu ke dokumen bercetak: <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>@media print { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> Sejak Ethan Marcotte mencadangkan konsep reka bentuk web responsif, keupayaan untuk menggunakan gaya berdasarkan lebar viewport telah menjadikan pertanyaan media CSS sebagai komponen teras kandungannya. Jika lebar viewport penyemak imbas mencapai saiz tertentu, satu set peraturan gaya digunakan untuk reka bentuk unsur -unsur yang boleh bertindak balas terhadap saiz penyemak imbas. <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>/* 当视口宽度至少为30em时... */ @media screen and (min-width: 30em) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> Perhatikan pengendali <p> di dalamnya? Ia membolehkan kita menggabungkan pernyataan. Dalam contoh ini, kami menggabungkan keadaan di mana jenis media adalah skrin dan ciri <code>and</code> ditetapkan kepada 30EM (atau ke atas). Kita boleh melakukan perkara yang sama untuk mencari pelbagai saiz viewport: <code>min-width</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>/* 当视口宽度在30em到80em之间时 */ @media screen and (min-width: 30em) and (max-width: 80em) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Salin selepas log masuk</div></div> Sekarang, gaya ini digunakan untuk julat lebar viewport yang jelas, bukannya satu lebar! <p> Walau bagaimanapun, spesifikasi Tahap 4 pertanyaan media memperkenalkan sintaks baru untuk menggunakan pengendali perbandingan matematik biasa seperti </p>, <p>, dan <code><</code>) untuk mencari julat lebar viewport, yang lebih sesuai dengan sintaks apabila menulis kod sambil mengurangkan jumlah kod. <code>></code> <code>=</code> mari kita dapatkan pemahaman yang lebih mendalam tentang bagaimana ia berfungsi. </p> <p> Operator perbandingan baru </p> <h3> Contoh terakhir menunjukkan bagaimana kita "menjalin" julat dengan menggabungkan keadaan menggunakan pengendali </h3>. Perubahan besar dalam spesifikasi tahap pertanyaan media 4 ialah kami mempunyai pengendali baru untuk membandingkan nilai dan bukannya menggabungkannya: <p> <code>and</code> </p> <ul>: menilai sama ada satu nilai kurang daripada <li> dan nilai lain <code><</code> <strong> </strong>: menilai sama ada satu nilai lebih besar daripada </li> nilai lain <li> <code>></code> <strong>: menilai sama ada satu nilai adalah sama dengan </strong> dan nilai lain </li> <li> <code>=</code>: menilai sama ada satu nilai kurang daripada atau sama dengan <strong> nilai lain </strong> </li> <li>: menilai sama ada satu nilai lebih besar daripada atau sama dengan <code><=</code> nilai lain <strong> </strong> </li> inilah cara kita menulis pertanyaan media yang menggunakan gaya jika lebar penyemak imbas adalah 600px atau lebih besar: <li> <code>>=</code> <strong> Berikut adalah cara menulis kandungan yang sama menggunakan pengendali perbandingan: </strong> </li> </ul> julat lebar paparan kedudukan <p> </p> Apabila kita menulis pertanyaan media CSS, kita biasanya membuat apa yang dipanggil <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>@media (min-width: 600px) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Salin selepas log masuk</div></div> -Mengesikan syarat -syarat untuk "pecah" dan gunakan satu set gaya untuk memperbaikinya. Reka bentuk boleh mempunyai banyak titik putus! Mereka biasanya berdasarkan pandangan antara dua lebar: di mana titik putus bermula dan titik putus berakhir. <p> </p> Berikut adalah bagaimana kita menggunakan pengendali <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>@media (width >= 600px) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Salin selepas log masuk</div></div> untuk menggabungkan dua nilai breakpoint: <h3> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>@media print { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> </h3> <p> Apabila kita meninggalkan pengendali boolean <code>and</code> dan mengamalkan sintaks perbandingan skop baru, anda akan mula memahami betapa mudahnya menulis pertanyaan media: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>/* 当视口宽度至少为30em时... */ @media screen and (min-width: 30em) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <p> Ia lebih mudah, bukan? Dan ia jelas menggambarkan peranan pertanyaan media ini. </p> <h3> Sokongan penyemak imbas </h3> <p> Pada masa penulisan, sintaks pertanyaan media yang lebih baik ini masih dalam peringkat awal dan sokongan semasa tidak luas seperti gabungan <code>min-width</code> dan <code>max-width</code>. Walau bagaimanapun, kami menghampiri! Pada masa ini, Safari adalah satu -satunya pengecualian utama, tetapi terdapat isu yang tidak dapat diselesaikan yang boleh anda fokuskan. </p> <p> Penyemak imbas ini menyokong data dari CANIUSE, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dalam versi ini dan kemudian. </p> <h4> desktop </h4> <p> </p> <table> <thead><tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr></thead> <tbody><tr> <td title="Chrome - "></td> <td title="Firefox - "></td> <td title="IE - "></td> <td title="Edge - "></td> <td title="Safari - "></td> </tr></tbody> </table> <s> PC Mobile/Tablet <h4> </h4> </s><p> <s> <table> <thead><tr> <th></th> <th></th> <th></th> <th></th> </tr></thead> <tbody><tr> <td title="Android Chrome - "></td> <td title="Android Firefox - "></td> <td title="Android - "></td> <td title="iOS Safari - "></td> </tr></tbody> </table> Ringkasan </s></p> <h3> kami memperkenalkan sintaks baru untuk kedudukan julat lebar viewport dalam pertanyaan media CSS. Sekarang bahawa spesifikasi tahap pertanyaan media 4 telah memperkenalkan sintaks ini, dan ia telah diterima pakai oleh pelayar Firefox dan Chromium, kami semakin dekat untuk menggunakan pengendali perbandingan baru dan menggabungkannya dengan ciri -ciri media lain selain lebar, seperti nisbah ketinggian dan aspek. </h3> <p> Ini hanya salah satu ciri baru yang diperkenalkan oleh spesifikasi Tahap 4, dan satu siri pertanyaan yang boleh kita buat berdasarkan keutamaan pengguna. Ia tidak berakhir di sana! Semak "Panduan Lengkap untuk CSS Media Query" untuk mendapatkan pandangan pertama pada apa yang boleh dimasukkan dalam tahap pertanyaan media 5. </p>

Atas ialah kandungan terperinci Sintaks pelbagai pertanyaan media CSS baru. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!