移动端布局

1.纯粹的移动端，不需要考虑任何的pc上的效果

           a.百分比  不推荐使用

           b.rem  (推荐)

           c.viewpoint  (推荐)

           d.无宽布局(不是说永远的不给宽度)

2.响应式(一套网站，兼容N多设配)

1-c viewport  视窗  可视区尺寸

      在没有使用meta的时候，页面在放入到手机屏幕中展示，整个页面会缩小，但是如果使用了meta页面会按照正常的样式展示；

     

      width 可视区域的宽度  固定尺寸(不需要px)/device-width；实际中只写640

      height 可视区域的高度  固定尺寸/device-height   实际一般不写

      initial-scale  初始缩放比例  ； 实际一般是.5859375

      maximun-scale  最大缩放比例； 实际一般是.5859375

    minimun-scale  最小缩放比例； 实际一般是.5859375

      user-saclable  用户缩放比例  ；实际只写no

    根据以上：在实际页面中,css中的代码尺寸按照实际图写，设计图给出多少px就是多少px，在手机端中就会实现自动布局，不需要使用任何的百分比；

   ios专用的：

       iso 9001  是一个标准,类似utf-8这种类型的标准

       ios：苹果的系统

      添加到主屏

            

         

       是否进入web app全屏模式   

         

       禁止将数字识别为电话号码

       

      -webkit-text-size-adjust: none;  将自动字号调整禁用

1-a  rem布局

       rem布局不要使用viewport布局中用到的内容mate；rem的大小是根据实际设计图中的尺寸进行计算的；计算方式如下：

      ch =  document.documentElement.clientWidth；屏幕实际宽度

       font-size = ch/每份大小 = 份数  (每份大小 一般都是按照40去计算，有兴趣的可以去了解一下，这里不详细说明)

一般的默认比值是16；如：在440设计图给出100px高度，那么在css代码中height:100px/16=6.25rem 

该方式的布局的适配比viewport更为全面一点，但是viewport跟简单一点；实际选择根据项目需要；

mobile-util.js  这个js 很重要，引入必须放在自己的css代码之后；这个js可以帮助自动实现布局的计算;

      rem布局时不需要自己计算初始的html的fontsize，直接根据16比值进行计算rem数值就行;

     viewport布局需要自己去写meta，但是缩放比例这些不要自己写,；