CSS3中media媒体查询器使用详解
最近几年随着响应式布局的发展，一次开发多次使用，自适应屏幕的响应式网站的需求越来越多。但是怎样使得网站能自适应屏幕呢？这里就需要提到一个css3里面新增的技术了-media媒体查询器。
那么什么是media媒体查询器呢？
Media媒体查询器是CSS3新增的一个可以检测打开网站的终端的屏幕分辨率的技术。
Media媒体查询器的使用方法大致如下：
1.设置一个meta标签如：
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
相关参数解释：
device-width:定义输出设备的屏幕可见宽度。
device-height:定义输出设备的屏幕可见高度。
width = device-width：宽度等于当前设备的宽度。
initial-scale：初始的缩放比例（默认设置为1.0）。
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）。
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）。
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）。
2.加载兼容文件js
为什么加载兼容文件js呢？
因为IE8以上的内核是不兼容html5以及CSS3 media的。所以需要加载两个兼容文件使得我们的代码能够实现出来。
1 <!--[if lt IE 9]> 2 <script src=" 3 <script src=" 4 <![endif]-->
也可以自行下载html5hiv.js和respond,js只需要在使用的时候修改对应的script里面的src路径就ok。
3.把IE的渲染方式调节到最高。闲在大多数的IE都是9以上的版本，这个版本的IE文档模式不是最新的，或者说很多的小伙伴没有注意这一点，所以可以通过下面的代码实现保持IE的文档模式保持最新的版本：
1 <meta http-equiv="X-UA-Compatible" content="IE=edge">
第二种方法：
1 <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
安装一个Google chrome frame这个Google chrome插件。这样可以使得所有的浏览器都能够使用Webkit引擎及V8引擎进行排版及运算，如果没有安装这个插件的话上面的代码是会使得浏览器一最高的文档模式展现效果。
CSS3 media的标准写法：
例如：当页面小于960px的时候执行它下面的CSS代码。
1 @media screen and (max-width: 960px){
3 body{
5 background: #000;
7 }
9 }这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体。
CSS2 Media用法
其实并不是只有CSS3才支持Media的用法，早在CSS2开始就已经支持Media，具体用法，就是在HTML页面的head标签中插入如下的一段代码：
1 <link rel="stylesheet" type="text/css" media="screen" href="style.css">
想知道现在的移动设备是不是纵向放置的显示屏，可以这样写：
1 <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：
1 <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">
但是这个方法会增加http的访问次数。所以用CSS3把所有的CSS写到一起才是最ok的。
Ok，现在我们回到CSS3的media用法上面，前面讲了用CSS3的写屏幕宽度小于960px的尺寸的写法，现在我们来写一下等于960px的方法：
1 @media screen and （max-width-device：960px）{
2
3 Body{
4
5 Background：blue；
6
7
}
8
9 }宽度大于960px的写法：
1 @media screen and(min-width:960px){
2
Body{
4
5 Background:red;
6
7
}
8
9
}前面就是常用的几种写法了，接下来对CSS3 media做一个总结：
width:浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid：检测输出的设备是网格的还是位图设备。
最后，附上一个趣味Demo结尾：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>CSS3 media Test</title>
6 <meta name="author" content="LostWeapon" />
7 <style>
8 *{
9 text-align: center;
10 font-size: 20px;
11 }
12 p{
13 font-size: 14px;
14 }
15 @media screen and (min-resolution: 75.5dpcm) {
16 .normal{display:none;}
17 }
18 @media screen and (min-resolution: 28.3dpcm) and (max-resolution: 75.4dpcm) {
19 .retina{display:none;}
20 }
21 </style>
22 </head>
23 <body>
24 <p class="retina">视网膜屏</br>哎呦 不错哦，小伙子有前途！</p>
25 <p class="normal">普通屏</br>还不快去努力学习挣钱换电脑!</br><strong>看什么看，说的就是你！</strong></p>
26 </body>
27 <footer>
28 <p>
29 Copyright ©2017 墨雨溪风
30 </p>
31 </footer>
32 </html>Atas ialah kandungan terperinci CSS3中media媒体查询器使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Bagaimana untuk menyelesaikan masalah yang media semakan komputer Lenovo tidak boleh dihidupkan?
Feb 12, 2024 am 08:36 AM
Sesetengah pengguna menghadapi masalah bahawa pemeriksaan media tidak boleh dimulakan apabila memulakan komputer riba Lenovo, yang mengelirukan Jadi bagaimana untuk menyelesaikan masalah memeriksa media tidak bermula pada komputer Lenovo? Tutorial ini akan membawa anda sebab dan penyelesaian untuk menyemak kegagalan media untuk dimulakan pada komputer riba Lenovo. Punca: 1. Kerosakan cakera keras: Jika komputer riba Lenovo mengalami kerosakan atau kegagalan cakera keras, ia akan menyebabkan komputer riba memaparkan media pemeriksaan dan tidak but. Sistem pengendalian rosak: Jika sistem pengendalian komputer riba Lenovo rosak, ia akan menyebabkan komputer riba memaparkan media pemeriksaan dan tidak boleh but. 2. Mulakan semula komputer, tekan F12 untuk memasuki BIOS, dan pilih item "Permulaan".
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
Jun 10, 2022 pm 01:00 PM
Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.
Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3
Apr 25, 2022 pm 04:52 PM
Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".
css3 apakah itu susun atur penyesuaian
Jun 02, 2022 pm 12:05 PM
Reka letak adaptif, juga dikenali sebagai "susun atur responsif", merujuk kepada susun atur halaman web yang boleh mengecam lebar skrin secara automatik dan membuat pelarasan yang sepadan dengan halaman web sedemikian boleh serasi dengan berbilang terminal berbeza dan bukannya membuat versi khusus untuk setiap terminal. . Reka letak penyesuaian dilahirkan untuk menyelesaikan masalah penyemakan imbas web mudah alih, dan boleh memberikan pengalaman pengguna yang baik untuk pengguna yang menggunakan terminal yang berbeza.
