flexible.png

1.設(shè)置meta標(biāo)簽

<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設(shè)計稿來走，不會讓頁面超過750px ,使用媒體查詢來設(shè)置*/
        @media screen and (min-width: 750px) {
            html {
                font-size: 75px !important;
            }
        }

        body {
            min-width: 320px;
            max-width: 750px;
            /* flexible.js把設(shè)計稿750px進(jìn)行10等分，所以html文字大小設(shè)置為75px(750px/ 10)，頁面元素rem值:頁面元素的px值/ 75(750px/75)*/
            width: 10rem;
            margin: 0 auto;
        }
    </style>

3.引入flexible.js

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

4.如果設(shè)計稿為750px 在vsCode安裝cssrem自動計算插件再把vsCode的cssRoot設(shè)置為75（因為flexible劃分了10等分）

image.png

@media 媒體類型and （媒體特性）{你的樣式}

1. 最大寬度max-width：其意思是指媒體類型小于或等于指定的寬度時

2.最小寬度min-width:其意思是指媒體類型大于或等于指定的寬度時

3..媒體查詢一般是從小到大或者從小到大的順序來的

 /* 小于540px 為藍(lán)色 */
    @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，設(shè)置好最常見的屏幕尺寸，利用媒體查詢設(shè)置不同的html字體大小
2、常用尺寸有：320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
3、確定將頁面劃分為多少份。例：15份
4、由于PC端也可以打開移動端首頁，默認(rèn)html大小為750/15=50px，注意由于代碼的層疊性需要將其寫在最上面

// 普通頁面打開 注意：由于頁面的層疊性 需將其寫在最前面
html{
    font-size:50px;
}
// 設(shè)置將頁面劃分的份數(shù)
@num:15;
// 設(shè)置常見的屏幕尺寸 修改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導(dǎo)入

image.png

使用flexible.js 做適配

image.png

• 劃分了10等分不需要自己計算寫媒體查詢

image.png

直接引入js在750設(shè)計稿就可以直接

image.png

在寫超過750px屏幕大小的時候 用媒體查詢設(shè)置最高權(quán)重

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