HTML5----响应式（自适应）网页设计（自动适应屏幕大小）
现在，很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机，电脑等设备，那么就需要我们在页面上下功夫，但移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。下面我就来说一下如何做响应式（自适应）的网页设计
1、在网页代码的头部，加入一行viewport元标签
在网页的中增加以下这句话，可以让网页的宽度自动适应手机屏幕的宽度，下面是这些属性的解释：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">| 属性 | 描述 |
|---|---|
| width=device-width | width为设置layout viewport 的宽度，为一个正整数，”width-device”表示宽度是设备屏幕的宽度 |
| initial-scale=1.0 | initial-scale为设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占网页的100% |
| minimum-scale=1.0 | 表示最小的缩放比例 |
| maximum-scale=1.0 | 表示最大的缩放比例 |
| user-scalable=no | 表示用户是否可以调整缩放比例，值为”no”或”yes” |