CSS3 媒体查询media,其实CSS2也有media,只是基本不用……

1
2
3
4
5
6
7
8
9
10
11
@media only screen and (max-width:375px){
.box{
background:#f00!important;
/*加上!important才有效。*/
}
}
.box{
width:100px;
height:100px;
background:#000;
}

媒体查询@media需要配合meta标签使用才有效。
简版:

1
<meta name="viewport" content="width=device-width">

完整版:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">

其中minimal-ui表示
参考链接:
iOS 7.1的Safari为meta标签新增minimal-ui属性,在网页加载时隐藏地址栏与导航栏
iOS 8 removed “minimal-ui” viewport property, are there other “soft fullscreen” solutions?
取值:

1
2
3
4
5
6
7
8
9
@media screen and (max-width:320px){
/*视窗宽度<=320px*/
}
@media screen and (min-width:769px){
/*视窗宽度>=769px*/
}
@media screen and (min-width:769px) and (max-width:1000px){
/*769px<=视窗宽度<=1000px*/
}

几道判断题:
1、媒体查询条件中,(max-width:320px)表示的是:
A. 当视窗宽度小于等于320px时。
2、要做响应式网站,就必须设置viewport
A. √
3、device-width是viewport的默认宽度
B、×
4、viewport的默认宽度就是屏幕的水平分辨率
B、×

本文地址: https://lxchuan12.github.io/2016/09/09/20160909-CSS3-@media/