搭建H5页面的时候，我们需要在HEAD中添加一个META标签(WB中输入meta:vp按下TAB键自动生成)
<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
viewport:视口
width=device-width 设置视口的宽度等于设备的宽度，如果不设置的话，默认视口的宽度是980px ->通俗的理解:我们这个操作其实就是告诉当前的浏览器按照多少宽度来渲染页面，换句话说就是展示当前这个页面的区域一共有多宽（浏览器的宽度）
user-scalable = no 禁止用户手动缩放
initial-scale = 1.0 定义缩放比例
maximum-scale = 1.0
minimum-scale = 1.0
高清屏
苹果手机是2倍高清屏幕的，也就是我们在手机上看到的那张100*100图片，其实苹果手机是按照200*200的尺寸给我们进行渲染的，这样的话，如果我们真实图片本身才100*100，最后呈现出来的就是被拉伸后变模糊的效果。
苹果手机上需要的素材图片都需要比看到的尺寸大一倍才可以
DPI适配思想:
我们在做页面的时候，最好每一张素材图片都准备两套或者三套，比如:
logo.png 100*100
logo@2x.png 200*200
logo@3x.png 300*300
媒体查询:@media
->媒体设备: all所有设备 screen 所有屏幕设备PC+移动端 print打印机设备...
->媒体条件:指定在什么样的条件下执行对应的样式
@media all and (max-320px){}
@media all and (min-320px) and (max-359px){}
@media all and (-webkit-device-pixel-ratio:2) 可以通过这样设置2倍高清屏的样式
响应式布局的解决方案:
1）、流式布局法
->容器或者盒子的宽度一般都不写固定的值，而是使用百分比(相对于视口区域的百分比)