好程式設計師web前端培訓分享之HTMLCSS學習筆記媒體查詢+ rem用法
好程式設計師 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
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913864/viewspace-2691285/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師web前端培訓分享HTMLCSS學習筆記BFC程式設計師Web前端HTMLCSS筆記
- 好程式設計師web前端培訓分享之HTMLCSS學習筆記css3-多列程式設計師Web前端HTMLCSS筆記S3
- 好程式設計師web前端培訓分享HTMLCSS學習之CSS基礎程式設計師Web前端HTMLCSS
- 好程式設計師web前端培訓HTMLCSS學習筆記之頁面最佳化程式設計師Web前端HTMLCSS筆記
- 好程式設計師web前端培訓分享HTMLCSS學習筆記css3選擇器程式設計師Web前端HTMLCSS筆記S3
- 好程式設計師web前端培訓分享node學習筆記程式設計師Web前端筆記
- 好程式設計師web前端培訓分享JavaScript學習筆記之設計模式程式設計師Web前端JavaScript筆記設計模式
- 好程式設計師web前端培訓分享JavaScript學習筆記之正則程式設計師Web前端JavaScript筆記
- 好程式設計師web前端培訓分享JavaScript學習筆記之陣列程式設計師Web前端JavaScript筆記陣列
- 好程式設計師web前端培訓分享JavaScript學習筆記Promise程式設計師Web前端JavaScript筆記Promise
- 好程式設計師web前端培訓分享JavaScript學習筆記cookie程式設計師Web前端JavaScript筆記Cookie
- 好程式設計師web前端培訓分享JavaScript學習筆記SASS程式設計師Web前端JavaScript筆記
- 好程式設計師web前端培訓分享React學習筆記(三)程式設計師Web前端React筆記
- 好程式設計師web前端培訓分享React學習筆記(一)程式設計師Web前端React筆記
- 好程式設計師web前端培訓分享React學習筆記(二)程式設計師Web前端React筆記
- 好程式設計師web前端培訓分享HTMLCSS之寬高自適應程式設計師Web前端HTMLCSS
- 好程式設計師web前端培訓分享HTMLCSS之HTML表單標籤程式設計師Web前端HTMLCSS
- 好程式設計師web前端培訓分享JavaScript學習筆記之ES5程式設計師Web前端JavaScript筆記
- 好程式設計師web前端培訓分享JavaScript學習筆記之迴圈結構程式設計師Web前端JavaScript筆記
- 好程式設計師web前端培訓分享node學習筆記系列之四十一程式設計師Web前端筆記
- 好程式設計師web前端培訓分享學習JavaScript程式設計師Web前端JavaScript
- 好程式設計師web前端培訓分享JavaScript學習筆記分支結構程式設計師Web前端JavaScript筆記
- 好程式設計師web前端培訓JavaScript學習筆記DOM程式設計師Web前端JavaScript筆記
- 好程式設計師web前端培訓JavaScript學習筆記--jQuery程式設計師Web前端JavaScript筆記jQuery
- 好程式設計師web前端培訓學習筆記Vue學習筆記一程式設計師Web前端筆記Vue
- 好程式設計師web前端技術分享媒體查詢程式設計師Web前端
- 好程式設計師web前端培訓學習筆記Vue學習筆記之二程式設計師Web前端筆記Vue
- 好程式設計師web前端培訓分享JavaScript學習筆記函式進階程式設計師Web前端JavaScript筆記函式
- 好程式設計師web前端培訓分享JavaScript學習指南程式設計師Web前端JavaScript
- 好程式設計師web前端培訓分享JavaScript學習筆記閉包與繼承程式設計師Web前端JavaScript筆記繼承
- 好程式設計師web前端培訓分享JavaScript學習筆記ajax及ajax封裝程式設計師Web前端JavaScript筆記封裝
- 好程式設計師web前端培訓分享JavaScript學習筆陣列的排序程式設計師Web前端JavaScript陣列排序
- 好程式設計師web前端培訓分享之uni-app學習筆記uni-app詳解程式設計師Web前端APP筆記
- 好程式設計師web前端培訓分享詳解JavaScript學習筆記建構函式程式設計師Web前端JavaScript筆記函式
- 好程式設計師web前端培訓分享怎樣學好css?程式設計師Web前端CSS
- 好程式設計師web前端分享Vue學習筆記(一)程式設計師Web前端Vue筆記
- 好程式設計師web前端培訓分享CSS基礎知識學習程式設計師Web前端CSS
- 好程式設計師web前端分享Nodejs學習筆記之Stream模組程式設計師Web前端NodeJS筆記