移动端响应式布局基础

搭建一个H5页面，我们需要在head中添加一个meta标签

快捷键：meta:vp + tab键

    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

viewport：视口

width=device - width 设置视口的宽度等于设备的宽度，如果不设置的话，默认视口宽度为980px。通俗的理解：我们这个操作其实就是告诉当前的浏览器按照多少宽度来渲染页面，换句话说，就是展示当前这个页面的区域一共有多宽（浏览器的宽度）

user-scalable=no 禁止用户手动缩放

initial-scale=1.0 设置屏幕默认的缩放比例

maximum-scale=1.0 设置屏幕最大的缩放比例

minimum-scale=2.0 设置屏幕最小的缩放比例

/*正常普通屏*/
        .box {
            background: url("ban.jpg") no-repeat;
        }

        /*2倍屏*/
        @media all and (-webkit-device-pixel-ratio: 2) {
            .box {
                background: url("ban@2x.jpg") no-repeat;
            }
        }

        /*3倍屏*/
        @media all and (-webkit-device-pixel-ratio: 3) {
            .box {
                background: url("ban@3x.jpg") no-repeat;
            }
        }

媒体查询：@media

->媒体设备：all所有设备  screen所有屏幕设备PC+移动端 print打印机设备...

->媒体条件：指定在 什么样的条件下执行对应的样式

        @media all and (max-width: 319px) {
            /*宽度小于320px*/
            .box {
                height: 110px;
            }
        }

        @media all and (min-width: 320px) and (max-width: 359px) {
            /*宽度大于等于320px小于360px*/
            .box {
                height: 120px;
            }
        }

苹果手机的尺寸：5s以下都是320px  6是375px宽度 6plus是414px

常用的安卓机尺寸：320， 360， 480， 540， (640， 720...)

在真实项目中，设计师给我们的设计稿一般都是640*1136  /  640*960  /   750*1334

响应式布局的解决方案：

①流式布局法：

->一般是用在PC端和手机端共用一套前端页面

->容器的宽度一般都不写固定的值，而是使用百分比（相对于视口区域宽度的百分比）

->其余的样式：字体，高度，margin，padding等等都按照设计稿上标注尺寸的一半来设置

->对于有些屏幕尺寸下，我们设置的固定值看起来不是特别好看的话，使用@media进行微调整

特殊情况：

设计师的设计稿是640px的，我们的素材图也是640px，这样iPhone6以及6plus展示的时候，图片不够大，对于这种情况就和UI设计师要1280px大图

        @media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) {
            .box {
                background: url("ban@big.jpg") no-repeat;
            }
        }

        @media all and (min-width: 641px) {
            .box {
                background: url("ban@big.jpg") no-repeat;
            }
        }

②REM响应式布局

->我们做的H5页面只在移动端访问（REM不兼容低版本的浏览器）

->REM：当前页面中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的

->  html{

font-size: 100px;   //1REM = 100px

}

Width: 2rem; 这样就是相当于width=200px

Height:2rem;

按照平时如果想要让页面中的所有比例所有一半，就需要修改所有的单位为px的值，而采用rem的话，只需要改变font-size: 50px;

这样就代表1REM = 50px，所以

Width: 2rem; 这样就是相当于width=100px

Height:2rem;

步骤：

①从UI设计师拿到设计稿（PSD格式的设计稿）640*1136

②在样式中给HTML设定一个font-size的值，我们一般都设置一个方便后面计算的值，例如：10px，100px...这里我们之所以用100px，主要是浏览器最小的字体大小都是12px，用10px比例计算的结果和真实UI设计稿会存在那么一点点的偏差

html{

font-size: 100px;   //1REM = 100px

}

③写页面，写样式

完全按照设计稿的尺寸来写样式，此时不用管任何的事情，设计稿给你的高度，宽度，字体大小，margin，padding的值是多少，我们就写多少

但是我们在写样式值的时候，需要把得到的像素值除以100，计算出对应的rem的值，我们设定的也都是rem的值

值得注意的是：真实项目中外层盒子的宽度我们一般还是不写固定值，沿用流式布局法的思想，我们用百分比的方式布局

④根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size

设计稿   640   600*300                      font-size=100             6rem*3rem

手机：   320    300*150                     font-size=50               6rem*3rem

手机：   375  351.5625*175.78125    font-size=58.59375    6rem*3rem

根据当前的屏幕宽度和设计稿宽度的比例，动态计算一下当前宽度下的fontsize值应该是多少，如果fontsize的值改变了，之前设定的所有rem单位的值自动会跟着放大或者缩小

~function () {
    var desW = 640,
        winW = document.documentElement.clientWidth,
        ratio = winW / desW,
        oMain = document.querySelector(".main");
    if (winW > desW) {
        oMain.style.margin = "0 auto";
        oMain.style.width = desW + 'px';
        return;
    }
    document.documentElement.style.fontSize = ratio * 100 + 'px';
}();