Penjelasan terperinci tentang sifat pertanyaan media CSS: @media dan min-width/max-width

Penjelasan terperinci tentang sifat pertanyaan media CSS: @media dan lebar-min/lebar-maks

Dalam pembangunan web moden, peranti mempunyai pelbagai saiz dan peleraian skrin. Untuk mencapai pengalaman pengguna yang lebih baik, kami selalunya perlu melaraskan gaya dan reka letak halaman web mengikut peranti yang berbeza. Sifat pertanyaan media CSS ialah alat berkuasa yang boleh membantu kami menggunakan gaya berbeza secara dinamik berdasarkan ciri peranti. Artikel ini akan memperkenalkan peraturan @media dan atribut min-width dan max-width secara terperinci dan memberikan contoh kod khusus.

@media rules ialah kata kunci yang digunakan dalam CSS untuk pertanyaan media. Dengan menggunakan peraturan @media, kami boleh menggunakan gaya berbeza berdasarkan jenis dan syarat media yang berbeza. Jenis media boleh menjadi skrin, cetakan, atau pertuturan (sintesis pertuturan), dsb. Syaratnya boleh menjadi lebar, ketinggian, resolusi, dsb. peranti.

Dalam pertanyaan media, atribut keadaan yang biasa digunakan ialah lebar min dan lebar maks. lebar min mewakili lebar minimum peranti, manakala lebar maksimum mewakili lebar maksimum peranti. Melalui kedua-dua sifat ini, kami boleh melaksanakan susun atur responsif yang mudah. Berikut ialah contoh:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
  h1 {
    font-size: 24px;
  }
  p {
    font-size: 18px;
  }
}

Kod di atas mengatakan untuk menggunakan gaya yang ditentukan apabila lebar peranti adalah antara 768px dan 1024px. Dalam contoh ini, warna latar belakang badan akan bertukar kepada biru muda, dan saiz fon h1 dan p akan dilaraskan dengan sewajarnya.

Selain atribut lebar min dan lebar maksimum, anda juga boleh menggunakan atribut bersyarat lain untuk melaksanakan pertanyaan media yang lebih kompleks. Sebagai contoh, kita boleh menggunakan lebar peranti min dan lebar peranti maks untuk membuat pertanyaan berdasarkan lebar sebenar peranti.

@media screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* 样式定义 */
}

Satu lagi atribut bersyarat yang biasa digunakan ialah orientasi, yang digunakan untuk menentukan sama ada orientasi peranti ialah landskap atau potret.

@media screen and (orientation: landscape) {
  /* 横向样式定义 */
}

@media screen and (orientation: portrait) {
  /* 纵向样式定义 */
}

Atribut pertanyaan media boleh disarangkan untuk mencapai pelarasan gaya yang lebih terperinci. Contohnya, kita boleh menyusun pertanyaan media lain dalam pertanyaan media dan menggabungkan berbilang atribut bersyarat untuk memenuhi keperluan susun atur tertentu.

@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
  
  @media (orientation: landscape) {
    h1 {
      font-size: 24px;
      margin-top: 20px;
    }
    p {
      font-size: 18px;
    }
  }
  
  @media (orientation: portrait) {
    h1 {
      font-size: 18px;
      margin-top: 10px;
    }
    p {
      font-size: 14px;
    }
  }
}

Dalam contoh, apabila lebar peranti adalah antara 768px dan 1024px, gaya berbeza digunakan mengikut orientasi peranti.

Untuk meringkaskan, sifat pertanyaan media CSS ialah alat yang fleksibel dan berkuasa yang boleh melaraskan gaya dan reka letak halaman web secara dinamik berdasarkan ciri peranti. Dengan menggunakan peraturan @media dan atribut bersyarat seperti min-width/max-width, kami boleh melaksanakan reka letak responsif dengan mudah dan meningkatkan pengalaman pengguna. Dalam pembangunan sebenar, kita boleh memilih atribut pertanyaan media yang sesuai mengikut keperluan khusus dan menggunakannya bersama-sama dengan bersarang untuk mencapai pelarasan gaya yang halus. Saya harap kandungan di atas dapat membantu pemahaman anda tentang sifat pertanyaan media.

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat pertanyaan media CSS: @media dan min-width/max-width. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!