2019.01.14移动端概念

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

    兼容性较强：initial-scale=1（初始值1）,minimum-scale=1（用户的最小缩放值）,maximum-scale=1（用户的最大缩放值）
    <meta name="viewport" content = "width=device-width,initial-scale=1,minimum-scale=1,maxmum-scale=1,user-scalable=no"/>
    屏幕自适应(百分比写法)：device-width
    <meta name="viewport" content = "width=device-width,initial-scale=1,user-scalable=no"/>

定宽的写法：
    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，也有一千多的

<script type="text/javascript">
            console.log(window.devicePixelRatio);
            //设备比与css像素比
            console.log(document.querySelector(".baba").clientWidth);
            //选择器：querySelector
</script>

三、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的值:
    <script type="text/javascript">
            console.log("手机viewportwidth",document.documentElement.clientWidth);
            //获取viewport宽
            var viewPotWidth = document.documentElement.clientWidth;
            //动态计算出html应该设置的fontsize大小
            //3. 根据设计图和基本fontsize算出目标手机下应有的fontsize
            //640：基准:设计图总宽
            var fontSize = viewPotWidth*40/640; 
            console.log(fontSize);
            //把计算出来的fontsize真正地赋值给html
            document.documentElement.style.fontSize = fontSize + 'px';
        </script>

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

    <script>
        /*动态改变根元素字体大小*/
                function recalc() {
                    var clientWidth = document.documentElement.clientWidth;
                    if(!clientWidth) return;
                    document.documentElement.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
                
                function initRecalc() {
                    recalc();
                    var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
                    if(!document.addEventListener) return;
                    window.addEventListener(resizeEvt, recalc, false);//添加监听事件
                    document.addEventListener('DOMContentLoaded', recalc, false);
                }
                initRecalc();
    </script>

注意：一般情况下不要给正文的字体大小使用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;
}

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

    <style type="text/css">
            .test{
                width: 30%;
                height: 0;
                padding-top: 30%;
                background-color: #0A6F98;
                position: relative;
                overflow: hidden;
            }
            .test img{
                position: absolute;
                width: 100%;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }
            .test2{
                width: 300px;
                height: 300px;
                background-color: #0000FF;
                overflow: hidden;
                position: relative;
                
            }
            .test2 img{
                /*width: 100%;*/
                position: absolute;
                left: -9999px;
                top: -9999px;
                right: -9999px;
                bottom:  -9999px;
                margin: auto;
                overflow: hidden;
            }
        </style>
        <div class="test">
            <img src="../2018.12.27 HTML第一节课/img/map.jpg"/>
        </div>
        <div class="test2">
            <img src="../2018.12.27 HTML第一节课/img/map.jpg"/>
        </div>

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

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