Meneroka sifat pertanyaan media CSS: @media dan min-device-width/max-device-width

Dengan populariti peranti mudah alih, reka bentuk responsif tapak web menjadi semakin penting. Apabila melaksanakan reka bentuk responsif, sifat pertanyaan media CSS memainkan peranan yang penting. Artikel ini akan meneroka sifat pertanyaan media @media dan min-device-width/max-device-width secara mendalam dan memberikan contoh kod khusus.

@media ialah atribut pertanyaan media yang diperkenalkan oleh CSS3, yang boleh menggunakan peraturan gaya berbeza mengikut peranti media atau parameter skrin yang berbeza. Jenis media yang biasa digunakan termasuk skrin, cetakan, pertuturan, dsb., manakala ciri media yang biasa digunakan termasuk lebar, ketinggian, warna, resolusi, dsb.

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
@media screen and (min-width: 601px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 1201px) {
  body {
    background-color: lightgray;
  }
}

body背景色为浅蓝色；当屏幕宽度在601px到1200px范围内时，body背景色为浅绿色；当屏幕宽度大于或等于1201px时，body背景色为浅灰色。

使用@media媒体查询属性可以根据屏幕尺寸灵活地调整布局和样式，使得页面在不同设备上都能良好地显示。

二、min-device-width/max-device-width 媒体查询属性：
min-device-width和max-device-width这两个媒体查询属性与min-width和max-width类似，不同之处在于前者是根据设备的物理尺寸来计算的，而后者是根据浏览器窗口的尺寸来计算的。

下面是一个示例，通过min-device-width和max-device-width属性来适应不同的设备屏幕尺寸：

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
    background-color: lightblue;
  }
}
@media only screen and (min-device-width: 1025px) and (max-device-width: 1440px) {
  body {
    background-color: lightgreen;
  }
}
@media only screen and (min-device-width: 1441px) {
  body {
    background-color: lightgray;
  }
}

上述代码示例中，当设备屏幕宽度在768px到1024px范围内时，body背景色为浅蓝色；当设备屏幕宽度在1025px到1440px范围内时，body背景色为浅绿色；当设备屏幕宽度大于或等于1441px时，bodyMenggunakan atribut pertanyaan media @media boleh melaraskan reka letak dan gaya secara fleksibel mengikut saiz skrin, supaya halaman boleh dipaparkan dengan baik pada peranti yang berbeza.

2. min-device-width/max-device-width media query:

Berikut ialah contoh yang menggunakan sifat lebar peranti min dan lebar peranti maks untuk menyesuaikan diri dengan saiz skrin peranti yang berbeza:

Dalam contoh kod di atas , apabila peranti Apabila lebar skrin berada dalam julat 768px hingga 1024px, warna latar belakang body berwarna biru muda apabila lebar skrin peranti berada dalam julat 1025px hingga 1440px, warna latar belakang; daripada body berwarna hijau muda ; Apabila lebar skrin peranti lebih besar daripada atau sama dengan 1441px, warna latar belakang body adalah kelabu muda.

Gunakan sifat pertanyaan media lebar peranti min dan lebar maksimum peranti untuk melaraskan reka letak dan gaya mengikut saiz fizikal peranti, supaya halaman boleh menyesuaikan diri dengan peranti yang berbeza.
1. Kesimpulan:

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