标签：
响应式设计(布局)：
出发点挺好，实际用起来非常不方便
1.大多数手机width=320px
2.大多数pad的width=1024px
媒体查询缺点：
1.流量非常浪费
2.少部分手机的分辨率不统一——非常乱
3.除了媒体查询，有更简单的方法——没必要media 媒体查询
@media screen ......
@media screen and (max-width:380px){
div{background:red;}
}
@media screen and (min-width:381px) and (max-width:680px){
div{background:green;}
}
@media screen and (min-width:681px){
div{background:blue;}
}
max-width:最大的宽度
min-width:381px 最小的宽度381px
link标签也能用media：屏幕、打印机
响应式引入样式的写法1：
<link rel="stylesheet" href="phone.css" media="screen and (max-width:380px)" />
<link rel="stylesheet" href="pad.css" media="screen and (min-width:381px) and (max-width:680px)" />
<link rel="stylesheet" href="pc.css" media="screen and (min-width:681px)" />
响应式引入样式的写法2：
注意：中间可以省略screen and 不写
@import url("phone.css") screen and (max-width:380px);
@import url("pad.css") (min-width:381px) and (max-width:680px);
@import url("pc.css") screen and (min-width:681px);
响应式引入样式的写法3：（实用简洁）
先在html页面引入一个main.css的样式表
<link rel="stylesheet" href="main.css" />
然后main.css里面在进行引入：
@charset "utf-8";
/* CSS Document */
@import url("phone.css") screen and (max-width:380px);
@import url("pad.css") screen and (min-width:381px) and (max-width:680px);
@import url("pc.css") screen and (min-width:681px);
响应式布局的基础知识
标签：
原文地址：http://www.cnblogs.com/shiyou00/p/5583052.html
