媒体查询是CSS3中的新特性,通过@media规则,它允许一段CSS代码在特定条件下才生效。
什么意思?
看下面代码
@media (max-width: 320像素)
{,,
,,,#页脚
,,,{
,,,,,,,字体大小:13 px;
,,,}
} 只有当浏览器宽度小于320 px时,#页脚的字体大小才会设置为13 px
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
以前我们可能要为不同的设备比如桌面/移动分别设置css文件。
那么现在看看利用@media可以这么做
/*,For 桌面:*/.col-1 {宽度:30%;}
.col-2 {宽度:10%;}
.col-3 {宽度:20%;}
.col-4 {宽度:40%;}
@media (max-width: 768 px), {
,,,/*,For mobile 电话:*/,,,(类*=吧闲！?,{
,,,,,,,宽度:,100%;
,,,}
} 是不是方便了很多,这样就可以把所有样式放到一个文档里了。
- - - - - - - - - - - - - - - - - - - - - - - -
很简单是不是,还有几个注意事项要提醒大家
<李> 手机样式优先
意味着手机样式写在桌面或其他设备样式的前面,这样能提高小型设备上的渲染速度
上面的例子就应该这样写
/*,For mobile 电话:*/(类*=吧闲！?,{
,,,宽度:,100%;
}
@media (min-width: 768 px), {
,,,/*,For 桌面:*/,,,.col-1 {宽度:30%;}
,,,.col-2 {宽度:10%;}
,,,.col-3 {宽度:20%;}
,,,.col-4 {宽度:40%;}
} 首先加载手机样式,当屏幕宽度大于768时加载桌面样式
你可能还要为多种设备添加样式,看下面这个例子
/*,For mobile 电话:*/(类*=吧闲！?,{
,,,宽度:,100%;
}
@media (min-width: 768 px),以及(max-width: 998 px) {
,,,/*,For 平板电脑:*/,,,.col-1 {宽度:25%;}
,,,.col-2 {宽度:10%;}
,,,.col-3 {宽度:15%;}
,,,.col-4 {宽度:30%;}
}
@media (min-width: 999 px) {
,,,/*,For 桌面:*/,,,.col-1 {宽度:30%;}
,,,.col-2 {宽度:10%;}
,,,.col-3 {宽度:20%;}
,,,.col-4 {宽度:40%;}
} 2。你还可以为手持设备的横屏或竖屏做设置
比如为手机设置横屏样式
@media screen 以及(方向:景观),以及(max-width: 767 px) 设置竖屏样式
@media screen 以及(方向:写真),以及(max-width: 767 px) 3。分辨率划分的一点建议
手机等小型设备:320 px ~ 479 px
大屏手机:480 px ~ 767 px
平板设备:768 px ~ 1024 px
大型平板及电脑设备:大于1025 px
