运行在移动设备的浏览器的web页面（H5页面、微网页、WAP页）

 

　　基于webkit内核

 

　　viewport即视口相当于PC端的浏览器窗口，可以设备尺寸大，也可以比设备尺寸小，允许开发者自定义

 

　　默认常规大小 980-1024px保证 PC 页面在移动浏览器上面的可视性

 

　　视觉视口

 

　　用户通过屏幕真实看到的网页的区域。，即屏幕宽度（设备宽度）

 

　　布局视口

 

　　布局视口是网页布局的基准窗口

 

　　在移动端，布局视口被赋予一个默认值，大部分为980px

 

　　理想视口

 

　　基于理想视口而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，

 

　　网站的所有内容都可以正常的呈现给用户

 

　　width=device-width 视口宽度 = 设备宽度initial-scale=1.0 初始缩放比例为1其他

 

　　属性 说明

 

　　initial-scale初始缩放比，大于0的数字

 

　　maximum-scale 最大缩放比（范围0.1 - 10）

 

　　minimum-scale 最小缩放比（范围0.1 - 10）

 

　　user-scalable 用户是否可以缩放，yes或no（1或0）

 

　　在不同规格的移动设备上，页面能够针对性的实现【合理】或者【尽可能统一】的展示效果

 

　　垂直方向用定值，水平方向用百分比、弹性布局及浮动、定位等布局技巧的综合运用创建可扩展的流式布局，让页面有能力随着屏幕宽度变化，页面也会跟着变化。

 

　　一定程度上满足自适应的需求不能在每种尺寸下都获得良好的视觉效果比如在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样。更适用于对横向拉伸的设计元素，对设计稿有一定要求，存在局限性

 

　　1）设置页面的viewport

 

　　2）确立好基准值，常规布局，使用rem单位取代px

 

　　3）换算不同设备尺寸下1rem的值，即改变不同尺寸下html 的font-size

 

　　基本能够满足常规适配需求，缺点是由于设备尺寸繁多需要设置密集的断点由于区配的区间性对不同设备的适配不是非常精准；不在查询设置范围之内，会导致无法适配。