春困秋乏夏打盹,避免打瞌睡,我就举个栗子来写吧
【栗子】
@media screen and (min-width:321px){
.box_bl a{
padding: 20px 0%;
font-size: 16px;
}
.box_br i{
max-width: 134px;
max-height: 134px;
}
.box_br a{
line-height: 34px;
}
}
-------------------------------------------------------------
这一段的构成是:@media 媒体类型 and(应用尺寸规则){你要应用的样式}
-------------------------------------------------------------
看吧,结构还是很简单的~
重点讲一下应用尺寸规则:
min-width:apx 媒体宽度大于等于a值时后面{}里面的的样式生效;
max-width:bpx 媒体宽度小于等于b值时后面{}里面的样式生效;
那么这就可以应用于实际了,
假如你写的响应式布局如下:
<div class="main_box">
<div class="main_left"></div>
<div class="main_right">
<i><img src="xxxx.png" ></i>
<div><span>BBBB</span></div>
</div>
</div>
原本的排版应该是左右结构的:
可是在小屏幕比如iphne 5的屏幕上面,右边的字体就会产生挤压跑到图片下面来了,这时就用到媒体查询了。
@media screen and (max-width:320px){
.main_right i{
max-width: 90px;
max-height: 90px;
}
}
在小于等于320px宽度的条件下,用90px*90px的尺寸图片;
@media screen and (min-width:321px){
.main_right i{
max-width: 134px;
max-height: 134px;
}
}
在大于等于320px宽度的条件下,用134px*134px的尺寸图片;
这样就解决了,在其他手机屏幕上面排版显示正常,而ip5屏幕上排版错乱的场景。
【延伸】
还可以应用于a<x<b这样的条件下
----------------------------------------------------------------------------------------------------
@media 媒体类型 and(应用尺寸规则) and(应用尺寸规则){你要应用的样式}
----------------------------------------------------------------------------------------------------
当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”,如下所示。
【栗子】
@media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} }
BTW,我用的DW写的可以直接添加媒体查询在css页面的最下面:)
列个重点共勉一下,这句很关键啊:
【写手机页面一定要添加这段代码,去除触屏,防止页面被放大,代码如下<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>】