在移动端页面工作了一段时间。下面总结一下工作中常用的几种移动端适配方案。基础网络上已经有很多基础知识总结，容易混淆的概念就是viewport。meta标签中的viewport属性是view视口的意思分为layoutviewportvisualviewportidealviewportlayoutviewport是中的width属性，意思是我们在css中写的所有样式都是相对于layoutviewport的。默认情况下，移动端的布局视口不是屏幕宽度，一般在768px~1024px之间（大多数情况下是980px）可以通过document.documentElement.clientWidth获取（根据width和initial-scale）视觉视口visualviewport是指用户透过设备屏幕看到的区域，默认等于当前浏览器窗口大小（当initial-scale为1时），当用户缩放浏览器时，layoutviewport的大小会不会改变，所以页面布局保持不变，但是缩放会改变可视视口的大小，可以通过window.innerWidth获取（会随着缩放改变）来放大页面，此时window.innerWidth减小相反（页面放大，你看到的东西更少）。理想视口理想视口是指网站在移动设备上的理想大小。这个size就是设备的屏幕尺寸，也就是可以通过screen.width获取（常量，不会改变）initial-scale根据公式initial-scale=idealviewportwidth/visualviewportwidth假设理想视口宽度为414px(device-width)，此时设置initial-scale为0.5，则视觉视口宽度为414/0.5=818。如果此时获取document.documentElement.clientWidth(layoutviewport)的值，则发现不是414px而是818px。结论：布局视口的宽度是width和视觉视口宽度的组合最大思考题：这种方案的缺点：整个页面都是缩放的，对于不想缩放的元素没有控制。市面上有些营销H5页面是通过后台可视化拖拽的方式构建的。为了适配各种尺寸的屏幕，这个方案是成本最低的实现（一奇秀就用这个方案）。实践中，我们以网站购买的在线B会员为例rem方案、vw方案、rem+vw方案、viewport方案，请使用chrome开发者工具模拟移动设备查看源码和直接右键查看代码。代码没有压缩，可以直观的看到各种方案的css。自适应写作
