好程式設計師 web 前端培訓分享之 HTMLCSS 學習筆記媒體查詢 + rem 用法

計算方法

計算rem方法：
結合媒體查詢 -> 隨著裝置的改變更改html font-size的值。

媒體查詢確定範圍？？

移動端設計圖： 640px 750px 1080px;
dpr 2 2 3
範圍 320px 375px

@ media screen and ( max-width :320px ) {

html {

font-size : 12 px ;

}}@ media screen and ( min-width :321px ) and ( max-width :375px ) {

html {

font-size : 14 px ;

}}@ media screen and ( min-width :376px ) {

html {

font-size : 16 px ;

}}

實現流程

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

根據設計圖分配情況

· 第一種情況：
如果UI設計圖為 640px
考慮的dpr 2
適配的核心裝置 320px;

100vw == 320px
1vw == 3.2px
?vw == 100px
31.25vw == 100px

· 第二種情況
如果設計圖為750px
考慮dpr 2
適配的核心裝置 375px
100vw == 375px
1vw == 3.75px
?vw == 100px
26.67vw == 100px;

設定方法

如果設計圖為 640px html設定{font-size:31.25vw}
如果設計圖為 750px html設定{font-size:26.67vw}

計算流程

vw 結合 rem 計算流程
因為設計圖 640px
所以html設定{font-size:31.25vw;}
ps中獲取height 88px
dpr 2
88 / 2 == 44px
44 / 100 == 0.44rem;

flxible.js 外掛

計算流程

1：引入flxible.js外掛
<script src=""></script>
2: 去掉html裡面預設的meta標籤
<meta name="viewport" content="width=device-width, initial-scale=1.0">

flxible.js原理

在頁面中引入flexible.js後，flexible會在<html>標籤上增加一個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就是相對於根元素<html>的font-size來計算的，flexible.js能根據<html>的font-size計算出元素的盒模型大小。這樣就意味著我們只需要在根元素確定一個px字號，因此來算出各元素的寬高，從而實現螢幕的適配效果

把視覺稿中的px轉換成rem

工作中我們常見的視覺稿大小大至可為640、750、1125三種。不過flexible.js並沒有限制只能用這三種，所以你還可以根據自身情況來調整，具體如何轉換，我們以視覺稿為640px的寬來舉例子，把640px分為100份，每一份稱為一個單位a，那麼每個a就是6.4px，而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

好程式設計師web前端培訓分享之HTMLCSS學習筆記媒體查詢+ rem用法

計算方法

實現流程

vw + rem

根據設計圖分配情況

設定方法

計算流程

flxible.js 外掛

計算流程

flxible.js原理

把視覺稿中的px轉換成rem

相關文章