Rumah >hujung hadapan web >tutorial css >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; } }Dalam contoh kod di atas, apabila lebar skrin kurang daripada atau sama hingga 600px,
Warna latar belakang badan
berwarna biru muda apabila lebar skrin berada dalam julat 601px hingga 1200px, warna latar belakang body
adalah hijau muda; lebar skrin lebih besar daripada atau sama dengan 1201px, warna latar belakang body
Warna latar belakang adalah kelabu muda. 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时,body
Menggunakan 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:
Kedua-dua atribut pertanyaan media min-device-width dan max-device-width adalah sama dengan min -width Sama seperti max-width, perbezaannya ialah yang pertama dikira berdasarkan saiz fizikal peranti, manakala yang kedua dikira berdasarkan saiz tetingkap penyemak imbas.
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.
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!