移動端適配簡單總結
阿新 • • 發佈:2019-03-22
png 獲取 you 布局 dev -- 元素 普通 scala ,也就是寬度為100%的效果。
移動端布局讓人費解的就是他的自動適配各個不同屏幕尺寸,裏面有很多的概念,簡單坐下總結,以便以後忘記。
屏幕尺寸:就是屏幕對角線的長度。
css像素:就是我們設計圖上的尺寸,單位px。又被叫做與設備無關的像素,簡稱DIPs,在普通屏幕下,一個css像素就是一個設備像素。
設備像素:又叫物理像素,就是手機的分辨率的一個點,比如ip6 750*1337,他的一個點就是一個物理像素 ,移動屏幕上的最小顆粒,設備定制出來,數量也不會變了,數量越多是不是顆粒就越小呢,好像也更清楚,哈!
設備獨立像素:也叫密度無關像素是一個虛擬像素(類似css像素),由系統轉換為物理像素,別不設備的寬高可以理解為設備獨立像素
像素比 dpr:設備像素比 = 物理像素 / 設備獨立像素
布局視口:layout viewport,獲取document.documentElement.clientWidth / Height,布局視口就是有多大就是多大,會出現橫向滾動條,最理想的布局視口大小就是理想視口,用戶就不用縮放了。
視覺視口:visual viewport,就是我們可以看到的區域,不算邊框,假如我們可以縮放圖片,我們看到的圖片的區域變小了,那麽布局視口和視覺視口的關系就是:當前縮放值 = 理想視口寬度 / 視覺視口寬度
理想視口:ideal viewport,就是分辨率,理想viewport的寬度等於移動設備的屏幕寬度
使得布局視口和理想視口寬度一致:<meta name="viewport" content="width=device-width">,content="width=device-width"這個就是為了設置成理想視口
rem+媒體查詢:
***head中添加視口設置***
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
***設置根元素font-size***
html{ max-width: 640px; margin: 0px auto; font-size: 100px;-----相當於1rem=100px/16px*100%=625%} ****css媒體查詢適配***
@media only screen and (max-width: 414px){
html{
font-size: 64px; ----相當於1rem=64px/16px*100%=400%
}
}
@media only screen and (max-width: 375px){
html{
font-size: 58px;-----相當於1rem=58px/16px*100%=362.5%
}
}
@media only screen and (max-width: 360px){
html{
font-size: 56px;
}
}
@media only screen and (max-width: 320px){
html{
font-size: 50px;
}
}
一般我們拿到的圖紙(舉例)是375 640 750,取640為例,設置其在不同設備下可以完美顯示
通過上面的相當於可以看出設備尺寸不同,1rem=的css像素也不同了,就可以在不同的設備上有相同的布局了,只不過相同的結構的寬高等相對比起來不一樣,這正是我們要的。
通過js調控達到適配:
引入淘寶的適配js的flexible.js文件: https://github.com/amfe/lib-flexible/blob/master/src/flexible.js
其實flexible首先動態改寫meta中的scale,使得永遠都是1:1,然後動態改寫dpr的值,最後動態改變font-size的值。
默認把設計稿分成100分,每一份是1a,並且默認1rem = 10a,那麽1rem = 設計稿尺寸/100*10 = 設計稿尺寸/10 = 基準值 = html中font-size的值。
重點:先會用在理解,不然理解起來很費勁,在用的過程中就懂概念了。
移動端適配簡單總結