Petua untuk membuat pertanyaan media menggunakan unit CSS Viewport vh dan vmin

Petua untuk membuat pertanyaan media menggunakan unit CSS Viewport vh dan vmin

Dengan populariti peranti mudah alih, reka bentuk responsif telah menjadi teknologi penting untuk reka bentuk web moden. Untuk menyesuaikan diri dengan saiz skrin yang berbeza, pembangun perlu melaraskan reka letak dan penggayaan melalui pertanyaan media. Dalam pertanyaan media, unit yang paling biasa digunakan ialah piksel (px). Walau bagaimanapun, CSS3 memperkenalkan unit tetingkap baharu, vh dan vmin, yang boleh menyesuaikan diri dengan saiz peranti yang berbeza dengan lebih baik. Artikel ini akan menerangkan cara membuat pertanyaan media menggunakan unit vh dan vmin, bersama-sama dengan contoh kod tertentu.

Pertama, mari kita fahami maksud unit vh dan vmin. vh mewakili peratusan ketinggian tetingkap, dan vmin mewakili lebar dan tinggi tetingkap yang lebih kecil. Contohnya, jika ketinggian port pandangan ialah 800px dan lebarnya ialah 1200px, maka 1vh adalah bersamaan dengan 8px (800 0.01), dan 1vmin bersamaan dengan 8px (800 0.01). Kedua-dua unit ini boleh digunakan untuk menetapkan dimensi, jidar, saiz fon, dsb. elemen.

Seterusnya, kami akan membincangkan cara membuat pertanyaan media menggunakan unit vh dan vmin. Katakan kita ingin menukar gaya elemen apabila ketinggian viewport kurang daripada 600px. Kita boleh menggunakan kod berikut:

@media (max-height: 600px) {
  .element {
    /* 设置需要改变的样式 */
  }
}

Walau bagaimanapun, kesan yang sama boleh dicapai dengan lebih ringkas menggunakan unit vh:

@media (max-height: 60vh) {
  .element {
    /* 设置需要改变的样式 */
  }
}

Dalam contoh ini, gaya .element akan digunakan apabila ketinggian viewport kurang daripada atau sama dengan 60%. Dengan cara ini, kita boleh melaraskan gaya dengan lebih fleksibel mengikut saiz port pandangan.

Selain pertanyaan media, kami juga boleh menetapkan saiz elemen menggunakan unit vh dan vmin. Sebagai contoh, jika kita mahu ketinggian elemen sentiasa sama dengan 50% daripada ketinggian viewport, kita boleh menggunakan kod berikut:

.element {
  height: 50vh;
}

Begitu juga, jika kita mahu margin elemen sentiasa sama dengan yang lebih kecil lebar dan ketinggian port pandangan Untuk 10%, anda boleh menggunakan kod berikut:

.element {
  margin: 10vmin;
}

Dengan menggunakan unit vh dan vmin, kami boleh melaksanakan reka bentuk responsif dengan mudah tanpa menggunakan unit piksel tetap. Ini bukan sahaja menjadikan reka letak lebih fleksibel, tetapi juga lebih baik menyesuaikan diri dengan saiz skrin peranti yang berbeza.

Ada beberapa perkara yang perlu kita ambil kira semasa menulis kod yang menggunakan unit vh dan vmin. Pertama, unit VH mungkin mempunyai bar skrol yang muncul pada peranti mudah alih, jadi kami perlu memastikan gaya elemen tidak dikaburkan oleh bar skrol. Kedua, sesetengah penyemak imbas mungkin tidak menyokong unit vh dan vmin, terutamanya versi pelayar lama. Oleh itu, kami perlu melakukan semakan keserasian dan menyediakan pilihan sandaran apabila menggunakan unit ini.

Ringkasnya, menggunakan unit CSS Viewport vh dan vmin memudahkan anda membuat pertanyaan media untuk reka bentuk responsif. Dengan menetapkan saiz dan gaya elemen, kami boleh melaraskan reka letak mengikut saiz tetingkap dan menjadikan halaman web memberikan pengalaman pengguna yang baik pada peranti yang berbeza. Walau bagaimanapun, apabila menggunakan unit ini, kita perlu memberi perhatian kepada keserasian dan menyediakan penyelesaian untuk memastikan halaman dipaparkan dengan betul merentas pelbagai penyemak imbas dan peranti.

Atas ialah kandungan terperinci Petua untuk membuat pertanyaan media menggunakan unit CSS Viewport vh dan vmin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!