0.前言
很多时候,前期使用 HTML 和 CSS 设计的样式非常精美,但是经常会因为对方的设备,浏览器等的原因,分辨率达不到要求,最后导致用户看到的界面非常丑陋,很多内容位置发生改变.
为了解决这个问题,,从 CSS 2.1 开始就定义了各种媒体类型(如显示器,便携浏览器等),允许设计者针对不用的媒体设备进行不同的 CSS 样式设计.
1.语法
语法规则如下:
@media not|only 设备类型 [and 设备特性] *
在上面的语法中,[and 设备特性] 部分可以出现 0 ~ N 次,通过使用多个 [and 设备特性] 可以对多个设备特性进行匹配.
media query 语法格式中支持设备如下:
| - | - |
|---|---|
| all | 适用于所有的设备 |
| aural | 适用于语音和音频合成器 |
| braille | 适用于触觉反馈设备 |
| embossed | 适用于凸点文字(盲文)印刷设备 |
| handheld | 适用于小型或者手提设备 |
| 适用于打印机 | |
| projection | 适用于投影图像,如幻灯片 |
| sceen | 适用于计算机显示器(最常用的一个) |
| tty | 适用于使用固定间距字符格的设备,如电传打字机和终端. |
| tv | 适用于电视类设备 |
media query 语法格式中设备特性如下:
| 特性 | 合理的特性值 | 是否支持 max/min | 说明 |
|---|---|---|---|
| width | 带单位的长度值,如100px | 是 | 匹配浏览器宽度 |
| height | 带单位的长度值,如100px | 是 | 匹配浏览器高度 |
| aspect-ratio | 比例值,如 16/9 | 是 | 匹配浏览器的宽度值和高度值的比例 |
| device-width | 带单位的长度值,如100px | 是 | 匹配设备分辨率的宽度值 |
| device-height | 带单位的长度值,如100px | 是 | 匹配设备分辨率的高度值 |
| device-aspect-ratio | 比例值,如 16/9 | 是 | 匹配设备分辨率的宽度值与高度值的比例 |
| color | 整数值 | 是 | 匹配设备使用多少位的色深,比如真彩色是32,如果不是彩色设备则为 0 |
| color-index | 整数值 | 是 | 匹配色彩表中的颜色数 |
| monochrome | 整数值 | 是 | 匹配单色帧缓冲器中每像素的位(bit)数,如果不是单色设备,这个数值为 0 |
| resolution | 分辨率,如300dpi | 是 | 匹配设备的物理分辨率 |
| scan | 只能是 progressive 或者 interlace | 否 | 匹配设备的扫描方式,其中 progressive 代表逐行扫描, interlace 代表隔行扫描 |
| grid | 只能是 0 或 1 | 否 | 匹配设备是否基于栅格,1代表基于栅格,0代表其他类型 |
我们发现是不是很牛 X ,几乎设备所有物理特性我们都可以获取到,这样我们是不是也可以根据我们获取到的特性的内容,我们可以去针对不同的内容去进行设置了?那我们现在就根据上面的特性来去做几个简单的例子.
2.示例
首先我们先来看一个基础案例,就是我们通过我们改变浏览器的大小,来让我们浏览器中的文字也随之变化,给用户一种,我们的界面内容是可以随着浏览器的改变而改变的感觉.
2.1 案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body {
height:100%;
}
html{font-size:10px}
h2 {
font-size:1.9rem;
}
/*媒体查询*/
@media screen and (min-width:321px) and (max-width:375px){
html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){
html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){
html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){
html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){
html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){
html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
</style>
</head>
<body>
<div>
<h2>我是李先生</h2>
<span>李鹏</span>
<span>2016年05月24日</span>
</div>
</body>
</html>
大家可以看到,我在代码中首先获取的 设备类型 是我们的屏幕.
之后我们通过 and 设备特性 对不同情况下的文字大小进行了修改,如下图.
@media screen and (min-width:321px) and (max-width:375px){
html{font-size:11px}}
test_3.gif
2.2 案例二
让我们的网页中的内容结构随着我们的界面大小而不断改变,具体样例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*设置默认的 CSS 样式*/
.container{
text-align: center;
margin: 10px auto;
width: 750px;
}
.container>div{
border: 1px solid rgba(0,0,0,0.3);
text-align: left;
/*设置 HTML 组件的 width 属性包括边框*/
box-sizing: border-box;
background-color: #96FF6B;
padding: 5px;
}
div .left{
width: 300px;
height: 230px;
float: left;
}
div .main{
width: 450px;
height: 230px;
float: left;
/*这里不采用 clearfix 的用法了,直接 clear */
clear:right;
}
div .right{
width: 750px;
float: left;
}
@media screen and (min-width: 1000px){
.container{
text-align: center;
margin: 10px auto;
width: 960px;
}
.container>div{
border: 1px solid rgba(0,0,0,0.3);
/*设置 HTML 组件的 width 属性包括边框*/
box-sizing: border-box;
background-color: #96FF6B;
padding: 5px;
}
div .left{
width: 240px;
height: 240px;
float: left;
}
div .main{
width: 460px;
height: 240px;
float: left;
}
div .right{
width: 260px;
height: 240px;
float: left;
}
}
@media screen and (min-width: 180px) and (max-width: 500px){
.container{
text-align: center;
margin: 10px auto;
width: 450px;
}
.container>div{
border: 1px solid rgba(0,0,0,0.3);
/*设置 HTML 组件的 width 属性包括边框*/
box-sizing: border-box;
background-color: #96FF6B;
padding: 5px;
}
div .left{
width: 450px;
height: 240px;
float: left;
}
div .main{
width: 450px;
height: 240px;
float: left;
}
div .right{
width: 450px;
height: 240px;
float: left;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h2>我是你们的李先生呀</h2>
<ul>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
</ul>
</div>
<div class="main">
<h2>我是你们的李先生呀</h2>
<p>MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP</p>
</div>
<div class="right">
<h2>我是你们的李先生呀</h2>
<ul>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
</ul>
</div>
</div>
</body>
</html>
具体效果展示如下:
test_2.gif
作者：MR_LP___李鹏
链接：https://www.jianshu.com/p/eb3af139ca21
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。