使用viewpoint 的web移动端适配解决方案

      布局方案从有网页这个东西的时候就以及有了，只是如今随着屏幕的多样化，移动端市场的逐渐占据主导地位，且界面变得越来越复杂而变的多种多样

      首先我们要从早先的移动端适配解决方案说，最出名的就是bootstrap的适配结局方案 bootstrap通过media查询将页面尺寸划分为4个阶段480 768 922 1200 通过这个将页面四个阶段每一个阶段对应一套布局方案，也就是常说的响应式布局，分为12栅格布局，如今spa应用火起的当下 react的ant Design vue 的Element UI 也做了响应式布局，分为24栅格体系。

          这种适配方案就是所谓的一套代码解决所有布局问题，事实上是4套布局方案合成一个完成从pc端到移动端适配，可以很强大，但是非常累，尤其是多数UI设计师不懂响应式设计规范所以常用的响应式框架往往不舍和我们的设计搞，往往是在一个公司没有UI工程师时开发会用，当然多数开发是不懂设计的，对于那些比较专业的9分法，比较出名的黄金分割比一般都是绝对不会用的，更何况是一些比较更专业的排版，色彩构成，平面设计（其实我以前也不在意，就像你习惯听好耳机突然有一天你换了个10块钱的垃圾耳机的时候你才会忽然发现之前的多么多么好）多数情况下做出来的东西比较丑（我觉得假如一个公司没有UI设计师往往老板对于做出来美丑其实并不是特别十分在意，或者公司的业务比较偏实体经济不是很依赖互联网）。

      其实这种有一个更大的弊端就是无法适应太过复杂的页面，看看多数国外比较出名的官网我们可以发现国外的多数网站都算是已简洁设计，页面上的元素都是比较整齐单一的不会显示过多元素在上面，而国内的页面设计方向则有些相反，不知是老板的偏好还是多数中国人的偏好我们总希望在一个页面里就希望把所有的东西都提供给用户（老实说这也就是懒，中国人做事比起分门别类更喜欢一刀切的爽感），所以说页面的内容往往很复杂，复杂内容必然要占据很多的空间所以在页面里的留白就会大量减少，有时候有必要在将一些东西都挤在一起，这个时候响应式布局在移动端处理就比较麻烦了，因为留白的减少但是文本的尺寸没有减少页面的排版就会受到影响而且手机的型号各异，每家尺寸不尽相同而且不同的app也会有影响适配起来相当麻烦

   第二套解决方案就是使用相对单位rem或者rw来完成适配移动端适配了，因为是相对单位所以页面可以根据页面的宽度或者高度做一定缩放

     这种适配方案从很大程度上适应了移动端相对复杂的排版，但是他有两个弊端，第一就是在小屏手机如iPhone5这款357宽手机是当字体大小小于0.7rem时就无法在缩放了，这个时候我们的排版就有可能出现串行的可能，解决方法是通过transform的scale来缩放，第二就是需要一定的计算量，UI给我们的设计搞一般是750或者540这种，标注工具比如标你妹一般都会帮我们自动加标注但这种标注是px不是rem，需要我们做一定的转换，假如我们现在使用less sass 这种可以封装函数的话我们可以交给计算机来做，但是需要一定的学习  成本

    第三套的话就是通过控制meta标签 name属性viewpoint来做移动端的整体的页面缩放了，这个meta标签的content属性可以控制页面的device-width initical-width max-width

     假如我们给一个div1000px的宽度而他的initical-width=0.5 那个他实际显示的大小将会1000*0.5 只要我们脚本获取屏幕的宽度再通过换算就可以得出设计稿和屏幕宽度的比率，代码只写一次可以不停服用，不需要换算，不用在意字体大小可以和设计师妹子不用因为界面适配问题而反目成仇而且简单高效，假如设计师妹子愿意直接使用那种可以直接生成css样式的标注工具，复制黏贴一把梭，大家都是好朋友，至于代码我就不贴了貌似不是一个适合放代码的地方，写的累而且丑