移动端布局

为什么手机端布局需要自适应？

    为了适应各个移动终端设备屏幕尺寸,完美的呈现应有的布局效果

    手机端上的响应式不能用在手机app上,非常耗性能,耗流量,耗电

    各个移动端设备,分辨率大小不一致,网页铺满整个屏幕,并在各种分辨下等比例缩放,不失真

手机端布局方法：

    1.百分比布局

       用百分比布局设置宽度、高度（绝大多数高度可以用px）、padding、margin的布局

       儿子所占的百分比是根据父元素的宽度

    2.rem布局

        1.  px 像素（Pixel），绝对单位，是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换成物理长度，需要指定精度DPI。

        2.  em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对象内文本的字体尺寸未被人设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此不是一个固定的值。

        3.  rem 是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的是HTML根元素。

         媒体查询：

 @media all and (min-width:320px) and (max-width:374px){
       html{
           font-size:12px
       }
   }
   
   @media all and (min-width:375px) and (max-width:413px){
       html{
           font-size:14px
       }
   }

   @media all and (min-width:414px){
       html{
           font-size:16px
       }
   }

缺点是：不能完美的做到每一款不同型号的手机的自适应，会有或多或少的未填充满或者出现横向滚动条

    vm

    100vw=视口宽度的100%

    目的：把html中的font-size的值的单位换成vw

     为了计算方便，我们可以把html中的font-size设置成100px

     使用  

         1：设计图 750

            html{

                font-size：26.67vw;

             }

            按在750的设计图上，量取的宽600px  高100px

           width:    宽600px/2/100 rem

            height:   高100px/2/100 rem

         2：设计图 640

            html{

                 font-size：31.25vw;

            }

           按钮在640的设计图上，量取的宽600px  高100px

              width:     宽515px/2/100 =?  rem

              height:   高85px/2/100  =?  rem

         百分比

            html{

                  font-size：62.5%;

             }

          1rem=10px