Penjelasan terperinci tentang cara menggunakan media css

Dalam pembangunan laman web, kepentingan CSS adalah jelas. Kita boleh menggunakan CSS untuk menetapkan pelbagai atribut penampilan seperti gaya, susun atur, fon, dan lain-lain untuk laman web untuk menjadikan laman web lebih menarik dan boleh dibaca. Walau bagaimanapun, peranti yang berbeza (seperti komputer meja, tablet, telefon mudah alih, dll.) mempunyai saiz dan resolusi skrin yang berbeza Tanpa tetapan gaya CSS untuk peranti yang berbeza, kesan paparan tapak web mungkin agak tidak memuaskan.

Salah satu cara untuk menyelesaikan masalah ini ialah fungsi CSS Media Query, yang boleh menulis gaya CSS yang berbeza untuk peranti yang berbeza. Artikel ini akan memberikan pengenalan yang mendalam kepada konsep asas, sintaks dan kes aplikasi CSS Media Query, yang membolehkan anda bermula dengan teknologi praktikal ini.

Apakah itu CSS Media Query

CSS Media Query ialah pernyataan bersyarat yang dibenamkan dalam helaian gaya yang menentukan penggunaan gaya CSS berbeza untuk saiz skrin dan jenis peranti yang berbeza. Melalui CSS Media Query, kami boleh melaksanakan reka bentuk tapak web responsif (Reka Bentuk Web Responsif), supaya tapak web dapat memberikan pengalaman pengguna terbaik pada peranti yang berbeza.

Bahagian Pertanyaan Media CSS terdiri daripada jenis media dan ciri media Formatnya adalah seperti berikut:

@media mediatype and|not|only (media feature) {
   CSS rules;
}

di mana mediatype menentukan jenis media yang akan digunakan gaya CSS. seperti skrin, cetakan, pegang tangan, dsb. , dan ciri media menentukan ciri media yang digunakan gaya CSS, seperti lebar peranti, ketinggian peranti, arah, dsb.

Jenis Media

Jenis media merujuk kepada jenis peranti yang digunakan untuk memaparkan dokumen. Jenis media biasa termasuk:

• semua: Berfungsi pada semua peranti.
• cetak: Sesuai untuk peranti output seperti pencetak dan pratonton cetakan.
• skrin: Sesuai untuk skrin komputer, tablet, telefon pintar dan peranti skrin lain.
• pegang tangan: Sesuai untuk peranti pegang tangan dengan skrin kecil (seperti telefon pintar).
• pertuturan: sesuai untuk peranti bunyi seperti pembaca skrin.

Sifat media

Sifat media termasuk tetapi tidak terhad kepada yang berikut:

• lebar: lebar port pandangan, unit px.
• tinggi: Ketinggian viewport, unit px.
• lebar peranti: lebar peranti.
• tinggi peranti: ketinggian peranti.
• orientasi: orientasi peranti, landskap (mendatar) atau potret (menegak).
• nisbah bidang: Nisbah lebar port pandangan kepada ketinggian.
• warna: kedalaman bit warna peranti.
• resolusi: resolusi peranti, unit dpi.

Melalui dua kombinasi di atas, kami boleh menentukan gaya CSS yang berbeza untuk jenis peranti dan atribut skrin yang berbeza.

Contoh penggunaan CSS Media Query

Berikut ialah beberapa contoh khusus menggunakan CSS Media Query, yang melibatkan gaya tersuai untuk peranti dan ciri skrin yang berbeza.

1. Tetapkan gaya berbeza untuk jenis peranti yang berbeza

/* 设备为电脑屏幕 */
@media screen and (min-width: 768px) {
   body {
      background-color: #333333;
   }
}

/* 设备为智能手机屏幕 */
@media handheld and (max-width: 599px) {
   body {
      background-color: #ffffff;
   }
}

Dua keping kod CSS di atas menggunakan warna latar belakang yang berbeza pada skrin komputer dan skrin telefon pintar masing-masing.

2. Tetapkan gaya berbeza untuk orientasi peranti

/* 设备为横向 */
@media screen and (orientation: landscape) {
   body {
      background-color: #f3f3f3;
   }
}

/* 设备为竖向 */
@media screen and (orientation: portrait) {
   body {
      background-color: #ffffff;
   }
}

Dua kod CSS di atas menetapkan warna latar belakang yang berbeza untuk orientasi peranti (mendatar atau menegak).

3. Tetapkan gaya berbeza berdasarkan lebar port pandangan

/* 视口宽度大于等于 960px */
@media screen and (min-width: 960px) {
   body {
      font-size: 16px;
   }
}

/* 视口宽度小于 960px */
@media screen and (max-width: 959px) {
   body {
      font-size: 14px;
   }
}

Dua keping kod CSS di atas menggunakan saiz fon berbeza berdasarkan lebar port pandangan.

4. Menggabungkan pelbagai syarat

Sudah tentu dalam penggunaan sebenar, pelbagai syarat perlu digabungkan mengikut keadaan tertentu. Sebagai contoh, kami ingin menetapkan imej logo yang sesuai untuk telefon pintar, tetapi ia hanya akan berkuat kuasa apabila lebar port pandangan peranti kurang daripada atau sama dengan 800px. Pada masa ini, anda boleh menggunakan kod berikut:

@media handheld and (max-device-width: 800px), 
(-webkit-min-device-pixel-ratio: 1.5) {
   #logo {
      content:url('logo-for-smartphone.png');
   }
}

Dalam kod CSS ini, kami menggunakan dua syarat: handheld and (max-device-width: 800px) dan (-webkit-min-device-pixel-ratio: 1.5). Yang pertama menyatakan bahawa peranti itu ialah peranti pegang tangan dan lebar port pandangan peranti kurang daripada 800px. Yang terakhir ini serasi dengan enjin pemaparan WebKit dan menentukan nisbah piksel peranti yang lebih besar daripada 1.5.

Ringkasan

Fungsi Pertanyaan Media CSS ialah bahagian penting dalam reka bentuk tapak web responsif, yang boleh membantu kami menulis gaya CSS yang berbeza untuk jenis peranti dan ciri skrin yang berbeza. Melalui pengenalan artikel ini, anda sepatutnya telah memahami konsep asas, sintaks dan kaedah aplikasi CSS Media Query, dan boleh menggunakannya untuk menyediakan gaya yang lebih halus dan diperibadikan untuk reka bentuk tapak web anda.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara menggunakan media css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!