2019-01-14移动端、rem

2019.01.14移动端概念

一、移动端的写法（百分比写法）

    兼容性较强：initial-scale=1（初始值1）,minimum-scale=1（用户的最小缩放值）,maximum-scale=1（用户的最大缩放值）
    
    屏幕自适应(百分比写法)：device-width
    

定宽的写法：
    viewport width=设计稿宽（固定宽度），不设置缩放相关属性，移动端浏览器会自动缩放页面以适配屏幕
    （initial-scale=1（初始值1）,minimum-scale=1（用户的最小缩放值）,maximum-scale=1（用户的最大缩放值））

二、长度单位（css像素与物理像素不一样）

绝对单位（无论在哪里测，表示长度固定不变）：m/cm/mm/inch（英寸）/尺    
                              1inch=2.54cm
相对单位：px
屏幕尺寸：对角线长度（单位inch）
            ppi（屏幕像素密度）：是px per inch 的缩写
            屏幕分辨率，理解了分辨率就能知道px为什么是相对单位
            css像素：逻辑像素，就是你在写css样式时用的像素
            物理像素：设备像素，屏幕这个硬件本身能够显示出色彩的最小单位
                        拿retina（2k）屏做案例，它将css中1*1px大小的一个div用了四个像素来显示，这样使得屏幕显示的图片更加细腻
            dpr:设备像素比（device pixel ratio）
viewport概念首先提出的是苹果公司，应用在Safari浏览器，解决的问题：在移动端页面能够正常显示pc页面
        viewport：视窗/视口，浏览器能够用来显示页面的尺寸大小
                    大部分移动端默认的视窗宽度是980px，也有一千多的

三、rem布局原理

1.rem与em（对比）
    rem是什么？单位
        rem： 1rem = 一倍html的fontsize大小
        em：1em = 一倍的爸爸或者自己的fontsize大小
2.rem如何实现
    0）设置meta标签。
    1）基准：fontsize（一般设为40px，自己定的）
    2）按基准fontsize和设计图的宽高计算出以rem为单位的宽高。比如div在设计图的宽是180px，转化成rem就是180/fontsize（40）
    3）根据设计图和基准fontsize算出目标手机下应有的fontsize。比如目标手机为640，那么要改变的fontsize就是：var fontSize = viewPotWidth*40/640; 
3.使用js动态改变fontsize的值

    使用js动态改变fontsize的值:
    

以后用这个js版本！直接拷贝即可

注意：一般情况下不要给正文的字体大小使用rem为单位，因为动态计算rem不能保证最后转化px单位时是一个整数，所以在pc端下查看时有可能会有模糊边缘

直接用px，因为相差不大

四、使用scss让布局更简便(结合js获取用户手机宽度，动态改变fontsize实现)

    @charset 'utf-8';
    $fontSize:40;
    @function r($p){
        @return $p/$fontSize*1rem;
    }
    //计算vm 百分比
    //@function v（$p）{
    //   @return $p/设计图总宽*100vm;
    //}
    
    html{
        font-size: $fontSize*1px;
    }
    body{
        font-size: 16px;
    }
    .test{
        width: r(180);
        height: r(100);
        background-color: skyblue;
}

五、保证宽高比的两种方法

六、vh vw单位的使用（兼容性较差，类似百分比，不能精细调像素）

vw:viewport宽度上的百分比，不是屏幕。
vh:viewport高度上的百分比，不是屏幕。