移动互联网自适应响应式布局设计方案

七彩知识堂[服务器知识]

移动互联网自适应响应式布局设计方案

　　移动互联网自适应响应式布局设计方案
　讲到响应式布局，相信大家都有一定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计（通过CSS3 Media Query实现响应布局）。
最后要注意的是在页面的头部<head></head>之间加上下面这句∶
　　 <meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
　　 meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
　　参数设置∶
　　 width – viewport的宽度
　　 height – viewport的高度
　　 initial-scale – 初始的缩放比例
　　 minimum-scale – 允许用户缩放到的最小比例
　　 maximum-scale – 允许用户缩放到的最大比例
　　 user-scalable – 用户是否可以手动缩放
最大宽度属性帮助开发者限制文本或其他元素的宽度。最大宽度的目的是把你的元素限制在边界线以内。使用下面的代码就可以限制最大宽度，你还可以根据你的需要改变数值。
.container {
width: 800px;
max-width: 90%;
}
- 自适应图片大小
下面的代码可以帮你根据限制的宽度自动调节图片大小。你需要做的就是设最大宽度为100%高度自适应。
img {
max-width: 100%;
height: auto;
}
不过对IE8上面的代码需要做些许调整，因为上面的代码只对IE7和IE9起效。对IE8如下：
@media \0screen {
img {
width: auto; /* for ie 8 */
}
}
- 最小宽度
要时刻记得最大宽度和最小宽度的区别。最大宽度把所有元素限制在框内，而最小宽度为文本或其他元素设置最小宽度。不过应用这个样式，到达最小宽度后你的网页不会更进一步按比例缩小。
　　 img {
　　 max-width： 100%;
　　 height： auto;
　　 width： auto;
　　 }
　　 .video embed， .video object， .video iframe {
　　 width： 100%;
　　 height： auto;
　　 }
html { font-size:100%; }
body {
font: 12px/1.5 "Microsoft Yahei",Arial;
color: #333;
font-weight: 400;
}