flexible.png

1.设置meta标签

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

2.初始化style

    <style>
        /* 如果屏幕超过了750px，那么我们就就按照750px设计稿来走，不会让页面超过750px ,使用媒体查询来设置*/
        @media screen and (min-width: 750px) {
            html {
                font-size: 75px !important;
            }
        }

        body {
            min-width: 320px;
            max-width: 750px;
            /* flexible.js把设计稿750px进行10等分，所以html文字大小设置为75px(750px/ 10)，页面元素rem值:页面元素的px值/ 75(750px/75)*/
            width: 10rem;
            margin: 0 auto;
        }
    </style>

3.引入flexible.js

<script src='js/flexible.js'></script>

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);