用媒体查询@media做【响应式】布局应用于【web app】

春困秋乏夏打盹，避免打瞌睡，我就举个栗子来写吧

【栗子】

@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;} }

好啦，今天就讲到这里啦，后面再讲rem......bala.......bala..........................

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"/>】