CSS3响应式布局
最后更新于：2022-04-01 11:56:27
### 响应式布局有哪些优点和缺点
**优点：**
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
**缺点：**
兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
### 1、Media Query
CSS3中的Media Query（媒介查询）
Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。根据视窗的大小自动调整布局。
**1、通过不同的媒体类型和条件定义样式表规则。**
媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面
**2、Media能获得的值**
设备的宽和高: device-width,device-height显示屏幕/触觉设备
渲染窗口的宽和高: width，heigth显示屏幕/触觉设备
设备的手持方向: orientation(portrait|lanscape) 横向/竖向
画面比例: aspect-ratio 浏览器的长宽比
屏幕比例: device-aspect-ratio 设备屏幕的长宽比，如4/3,16/9等。
视觉媒体: color 定义每一组输出设备的彩色原件个数，如果不是彩色设备，则值等于0
分辨率: resolution 定义设备的非暴力，如:96dpi,300dpi
以上仅仅orientation不支持max,min.
**3、可用设备参数名**
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或者打印预览模式
projection项目演示(如幻灯片)
screen 彩色电脑屏幕
tty 固定字母间距的网络媒体，如电传打字机
**4、逻辑关键字**
only 限定某种设备类型
and 逻辑与，连接设备名与选择条件、选择条件1与选择条件2
not 排除某种设备(除了什么之外)
, 设备列表
**5、语法结构及用法**
@media 设备名 only (选取条件) not (选取条件) and (设备选取条件), 设备二{sRules}
在link中使用@media:
<link rel = "stylesheet" type = "text/css" media = "only screen and (max-width： 640px),only screen and (max-device-width： 640px)"
href = “home.css”/>
only可以省略，第一个条件是网页的最大宽度是640，第二个条件是设备的最大宽度是640px。
@media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {//code}
电脑屏幕尺寸不小于1024px，并且最大的可见宽度为989px;设备最大宽度为480px，并且横向放置，设备宽度不小于480px，并且小于1024px，竖直放置的设备。
字符间以空格相连，选取条件包含在小括号内，code为设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔.
**6、测试响应式布局**
响应式布局需要在不同的设备上测试，可以使用浏览工具来检验不同尺寸屏幕小的显示效果。帮助你在不同尺寸屏幕下浏览网站效果的工具 - Responsivator [http://responsive.d3corp.com/?d3corp.com](http://responsive.d3corp.com/?d3corp.com)
**7、响应式布局设计**
~~~
/*浏览器的可视区域不小于980px*/
@media screen and (min-width:980px){
.head{width:100%; height:70px; }
.head #logo{position:fixed; top:0px; left:50px;}
.head nav{ width:870px;background:#fff;height:70px; margin:0 auto;}
.head nav a{ width:100px; height:40px; margin:15px 0px; display:inline-block; }
}
/*浏览器的可视区域在640px和980px之间*/
@media screen and (min-width:640px) and (max-width:980px){
.head{width:70px;height:870px;}
.head nav{ width:70px;background:#fff;height:870px;margin-top:20px;}
.head nav a{ width:70px; height:40px; margin:15px 0px; display:inline-block; }
}
/*浏览器的可视区域小于640px*/
@media screen and (max-width:640px){
.head{width:256px; height:256px;position:fixed; bottom:20px; left:20px;}
.head #logo{position:absolute; top:0px; left:0px; right:0; bottom:0; padding:auto; margin:auto;}
.head nav{width:256px; height:256px;background-color:rgba(0,0,0,0.6); border-radius:50%; transform:scale(0.1) rotate(-270deg); opacity:0; transition:all 500ms;margin-top:0px;}
.head nav a{display:block; width:40px;height:40px;border-radius:50%; position:absolute;margin-left:-20px; margin-top:-20px; }
~~~
为了更好的显示效果，往往还要格式化一些CSS属性的初始值，如：
~~~
/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust： none;
}
/* 设置HTML5元素为块 */
article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section {
display： block;
}
~~~
### 2、利用meta标签对viewport进行控制
移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。
设置width为decice-width;
~~~
<meta name="viewport" content="width=device-width; initial-scale=1.0">
~~~
content中参数设置:
width – viewport的宽度
height – viewport的高度,这个属性很少使用
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放 no或者yes
最后对于在IE浏览器中不支持media query的情况，我们可以使用Media Query JavaScript来解决，只需要在页面头部引用css3-mediaqueries.js即可。示例：
IE8及低版本浏览器不支持CSS3 media queries的解决方法
另外关于IE8低版本兼容问题可参考：[http://blog.csdn.net/wuruixn/article/details/8642934](http://blog.csdn.net/wuruixn/article/details/8642934)