Rem 布局方式

flexible.png

1.设置meta标签

2.初始化style

3.引入flexible.js

4.如果设计稿为750px 在vsCode安装cssrem自动计算插件再把vsCode的cssRoot设置为75（因为flexible划分了10等分）

image.png

@media 媒体类型and （媒体特性）{你的样式}

1. 最大宽度max-width：其意思是指媒体类型小于或等于指定的宽度时

2.最小宽度min-width:其意思是指媒体类型大于或等于指定的宽度时

3..媒体查询一般是从小到大或者从小到大的顺序来的

 /* 小于540px 为蓝色 */
    @media screen and (max-width:539px){
      body{
        background-color: blue;
      } 
    }
    /* 540~970 页面为红色 */
    @media screen and (min-width:540px) and (max-width:969px){
      body{
        background-color: red;
      }
    }
    /* 大于970px为绿色*/
    @media screen and (min-width:970px){
      body{
        background-color: green;
      }
    }

1. rem相对于html元素字体大小来说

rem.png

计算公式

计算公式.png

1、新建common.less，设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小
2、常用尺寸有：320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
3、确定将页面划分为多少份。例：15份
4、由于PC端也可以打开移动端首页，默认html大小为750/15=50px，注意由于代码的层叠性需要将其写在最上面

// 普通页面打开 注意：由于页面的层叠性 需将其写在最前面
html{
    font-size:50px;
}
// 设置将页面划分的份数
@num:15;
// 设置常见的屏幕尺寸 修改html文字大小，为了代码更简洁，建议从小到大来写
@media screen and (min-width:320px){
    html{
        font-size: 320px / @num;
    }
}
@media screen and (min-width:360px){
    html{
        font-size: 360px / @num;
    }
}
@media screen and (min-width:375px){
    html{
        font-size: 375px / @num;
    }
}
@media screen and (min-width:384px){
    html{
        font-size: 384px / @num;
    }
}
@media screen and (min-width:400px){
    html{
        font-size: 400px / @num;
    }
}
@media screen and (min-width:414px){
    html{
        font-size: 414px / @num;
    }
}
@media screen and (min-width:424px){
    html{
        font-size: 424px / @num;
    }
}
@media screen and (min-width:480px){
    html{
        font-size: 480px / @num;
    }
}
@media screen and (min-width:540px){
    html{
        font-size: 540px / @num;
    }
}
@media screen and (min-width:720px){
    html{
        font-size: 720px / @num;
    }
}
@media screen and (min-width:750px){
    html{
        font-size: 750px / @num;
    }
}

在less文件用@import导入

image.png

使用flexible.js 做适配

image.png

• 划分了10等分不需要自己计算写媒体查询

image.png

直接引入js在750设计稿就可以直接

image.png

在写超过750px屏幕大小的时候 用媒体查询设置最高权重

image.png

flexible源码:

(function flexible(window, document) {

    var docEl = document.documentElement;

    var dpr = window.devicePixelRatio || 1;

    // adjust body font size

    function setBodyFontSize() {

        if (document.body) {

            document.body.style.fontSize = 12 * dpr + "px";

        } else {

            document.addEventListener("DOMContentLoaded", setBodyFontSize);

        }

    }

    setBodyFontSize();

    // set 1rem = viewWidth / 10

    function setRemUnit() {

        //将屏幕分成10等份 750px的界面1rem=75px

        var rem = docEl.clientWidth / 10;

        docEl.style.fontSize = rem + "px";

    }

    setRemUnit();

    // reset rem unit on page resize

    window.addEventListener("resize", setRemUnit);

    window.addEventListener("pageshow", function(e) {

        if (e.persisted) {

            setRemUnit();

        }

    });

    // detect 0.5px supports

    if (dpr >= 2) {

        var fakeBody = document.createElement("body");

        var testElement = document.createElement("div");

        testElement.style.border = ".5px solid transparent";

        fakeBody.appendChild(testElement);

        docEl.appendChild(fakeBody);

        if (testElement.offsetHeight === 1) {

            docEl.classList.add("hairlines");

        }

        docEl.removeChild(fakeBody);

    }

})(window, document);