响应式网页

响应式/自适应网页：一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。

响应式网页的3个特征：

1.流式布局；

2.可伸缩的图片和文字；

3.CSS3 Media Query  （媒体查询）

viewport(视口)概念的引入：

（2009年左右），HTML网页基本都是为PC设计的，宽度比较大。

IOS/Safari 可以显示这些为PC而编写的网页——把PC网页缩小后放到手机屏幕上——文字/图片都会强制缩小，影响浏览体验。

IOS引入了视口（viewport）的概念：用于显示网页的内容的一个逻辑概念，其宽度/高度都可以任意指定，可以大到2000px都可以，网页不是仅仅显示在物理窗口，而是显示在视口中——就可以实现大网页不经缩放，直接显示在手机中——只是需要用户左右滑动即可。后来Android也引入了该概念。

如何编写响应式网页？

1.设置viewport元标签；

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

2.避免使用绝对单位（px），用相对单位代替（%、auto、em等）；

3.使用流式定位：float；

4.图片大小实现自适应；img{max-width：100%}会随着容器的改变而改变，且不会超过图片自身原始大小，防止失真；

5.根据浏览器屏幕的特征，有选择性的执行某些CSS样式——CSS3媒体查询技术（Media Query）。