拥抱响应式设计 - Responsive Web Design
近几年，随着智能移动设备的普及，移动应用爆发，HTML5技术兴起，朋友圈爆棚，微博哭晕在厕所，各种移动web网页应用也越来越火爆。
于是乎，许多原来并不明显的问题，比如网页如何适应不同手机的分辨率？如何同时适应PC，手机端屏幕？等等，不一而足。因此，响应式设计这一概念逐渐走入FE程序员的视野。拥抱响应式设计，所为何？
顾名思义，就是让网页自动响应屏幕大小的变化，支持移动设备。那么，问题来了，我们需要什么技术，去达到这一点呢？我有5点建议：
1. 使用 <meta name="viewport" />标签。
我们在类似 https:mobile.xxx.com/portal 这种移动页面中，经常可以在页面的<head>里看到这个标签。
一般写作 ：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
这段代码的意思，就是让屏幕的宽度=设备的宽度，并且不允许user的缩放。这样，就会使代码，认为屏幕的分辨率比实际的分辨率低，从而让DOM元素
在mobile device上显得更大更清楚，不至于太小。（具体的原理，我会另外贴一篇博客）
2. 使用grid类型的布局，结合float属性。
具体方法就是将页面分为多个小方块组成，让每个部分的float属性设置为 "float:left;" 。
这种技巧的意义，就是当页面横向的内容超过屏幕宽度后，可以向左浮动到下一行。让所有内容显示在屏幕中，而不需要显示x轴滚动条，从而便于用户阅读网页。
3. 使用%布局，避免使用px做布局。
使用百分号的好处就是不会定死元素的宽度，而是自适应屏幕的宽度，达到响应式的目的。
Bootstrap的栅格式布局也是主要应用这个思想。
4. 使用media query
所谓media query ，就是通过CSS 的media语法，判断屏幕的宽度等因素来加载不同的CSS，从而适应不同屏幕宽度。
代码：
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
这段代码显而易见，就是当屏幕宽度不超过400px时，加载其中的CSS，是不是很简单呢？也可以在使用外联CSS时，使用这个方法，加载不同的CSS文件。可以在link
标签里配置。
5. 使用JS。
通过JS判断来设定某些特殊元素的大小。这个方法属于特殊处理，不适用于大量使用。
【小结】
一般来讲，以上的5中方法，结合使用，可以最佳实现出responsive的效果。多多练习哟！
浙公网安备 33010602011771号