欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

媒體查詢 + rem計算方法 計算rem方法：

結合媒體查詢 -> 隨著設備的改變 更改html font-size的值。

?

媒體查詢確定范圍？？

?

移動端設計圖 ： 640px 750px ;

范圍320px 375px

css">@media screen and (max-width:320px){
    html{
        font-size:12px;
    }
}
@media screen and (min-width:321px) and (max-width:375px){
    html{
        font-size:14px;
    }
}
@media screen and (min-width:376px){
    html{
        font-size:16px;
    }
}

實現流程

ui設計圖   640px
?
dpr    2
?
ps量出height   88px;
?
88px / 2 ==  44px;
?
設計圖640px    dpr  2
?
640px  /  2 == 320px
?
44px / 12px == rem

vw + rem為了方便計算，可以把html的font-size值 設置成100px;1rem == 100px;

100px是一個固定值，沒辦法隨著設備的改變而改變。

能跟隨設備發生改變

vw 根據視口大小進行改變。

100px == ?vw 根據設計圖分配情況設置方法如果設計圖為 640px html設置{font-size:31.25vw}

如果設計圖為 750px html設置{font-size:26.67vw}計算流程vw 結合 rem 計算流程

因為設計圖 640px

所以html設置{font-size:31.25vw;}

ps中獲取 88px

dpr2

88 / 2 == 44px

44 / 100 == 0.44rem;

.js 插件 計算流程1：引入.js插件

2: 去掉html里面默認的meta標簽

.js原理在頁面中引入.js后，會在標簽上增加一個data-dpr屬性和font-size樣式（如下圖）。

為了方便計算可以設置成100px;

//js首先會獲取設備型號，然后根據不同設備添加不同的data-dpr值，比如說1、2或者3，從源碼中我們可以看到。
if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下，對于2和3的屏，用2倍的方案，其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他設備下，仍舊使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

頁面中的元素用rem單位來設置，rem就是相對于根元素的font-size來計算的css 媒體查詢判斷瀏覽器尺寸，.js能根據的font-size計算出元素的盒模型大小。這樣就意味著我們只需要在根元素確定一個px字號，因此來算出各元素的寬高，從而實現屏幕的適配效果把視覺稿中的px轉換成rem

工作中我們常見的視覺稿大小大至可為640、750、1125三種。不過.js并沒有限制只能用這三種，所以你還可以根據自身情況來調整，具體如何轉換，我們以視覺稿為640px的寬來舉例子，把640px分為100份，每一份稱為一個單位a，那么每個a就是6.4pxcss 媒體查詢判斷瀏覽器尺寸，而1rem單位被認定為10a，此時，1rem=1(a)X10X6.4(px)即64px。

640px/100=6.4px                              1個單位a為6.4px
1rem = 10a                                   1rem單位被認定為10a
1rem = 1(a)*10*6.4(px) = 64px

點擊加入前端千人大群交流學習,更多課程視頻-源碼軟件安裝包免費贈送~