在H5開(kāi)發(fā)移動(dòng)端界面時(shí)，移動(dòng)端適配一直是一個(gè)比較頭疼的事情，常見(jiàn)的移動(dòng)端適配有viewport適配，rem適配，百分比適配等等，在這里我們只介紹viewport適配和rem適配。看完這篇文章相信你應(yīng)該會(huì)實(shí)戰(zhàn)操作移動(dòng)端對(duì)于不同手機(jī)大小的適配問(wèn)題了。
一：rem適配
rem是指相對(duì)于根元素的字體大小(font-size)的單位，根標(biāo)簽的font-size=1rem。其可以稱作為相對(duì)單位，也就是說(shuō)我們可以通過(guò)視口的大小動(dòng)態(tài)更新根元素字體大小(font-size)的值，從而動(dòng)態(tài)更新rem所相對(duì)的值，使用使得移動(dòng)端網(wǎng)頁(yè)能夠適配各種型號(hào)的手機(jī)。話不多說(shuō)先上代碼。
js代碼(用于動(dòng)態(tài)修改其根標(biāo)簽font-size的值)：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script type="text/javascript">??????? ????????//rem適配????????//rem適配原理：改變了一個(gè)元素在不同設(shè)備上占據(jù)的css像素的個(gè)數(shù)????????/*rem適配的優(yōu)缺點(diǎn)????????????優(yōu)點(diǎn):沒(méi)有破壞完美視口????????????缺點(diǎn):px值到rem的轉(zhuǎn)換太復(fù)雜*/????????????????????(function(){????????????var styleNode = document.createElement("style");????????????/* 當(dāng)不除以16時(shí)此時(shí)1em便占據(jù)視口寬度,????????????那么我們給其頁(yè)面中的元素設(shè)置寬高基本都會(huì)小于1rem,瀏覽器的計(jì)算并不會(huì)特別精準(zhǔn)容易出現(xiàn)偏差 */????????????// var w = document.documentElement.clientWidth;????????????/* 所以此時(shí)我們除以16,使得16rem便占據(jù)了滿屏,對(duì)于頁(yè)面中大多數(shù)元素的rem都會(huì)超過(guò)1rem */????????????var w = document.documentElement.clientWidth/16;//獲取視口大小????????????/* 設(shè)置此時(shí)根元素的fontsize，向html的style樣式中添加font-size屬性*/????????????styleNode.innerHTML = "html{font-size:"+w+"px!important}";????????????//向head標(biāo)簽中添加style標(biāo)簽，其中包含html{font-size:w;}????????????document.head.appendChild(styleNode);????????})()????</script> |
html與css代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<head>????<meta charset="UTF-8">????<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>????<title></title>????<style type="text/css">????????*{????????????margin: 0;????????????padding: 0;????????}????????#test{????????????width: 2rem;????????????height: 2rem;????????????background: pink;????????????text-align: center;????????????line-height: 2rem;????????}????</style></head><body>????<div id="test">test</div></body> |
我們來(lái)看一下通過(guò)改變手機(jī)的型號(hào)(視口的大小)對(duì)于頁(yè)面的元素有什么變化。
從上述兩張圖我們可以看出，當(dāng)我們改變手機(jī)的型號(hào)后(改變完成后記得要刷新哦)，視口的大小也發(fā)生了改變，對(duì)于test元素的寬高也發(fā)生了改變，此時(shí)我們就能夠進(jìn)行進(jìn)行移動(dòng)端適配了。
rem適配原理
改變了一個(gè)元素在不同設(shè)備上占據(jù)的css像素的個(gè)數(shù)
rem適配的優(yōu)缺點(diǎn)
- 優(yōu)點(diǎn)：沒(méi)有破壞完美視口
- 缺點(diǎn)：px值轉(zhuǎn)換rem太過(guò)于復(fù)雜(下面我們使用less來(lái)解決這個(gè)問(wèn)題)
less+rem解決轉(zhuǎn)換復(fù)雜問(wèn)題
使用less中進(jìn)行運(yùn)算，減少了我們手動(dòng)進(jìn)行計(jì)算所需要的rem值，也可以使用stylus,scss等css預(yù)處理器，來(lái)進(jìn)行對(duì)于rem的運(yùn)算,該例子需要結(jié)合上述js代碼來(lái)進(jìn)行搭配。
此時(shí)我們的less代碼為:
|
1
2
3
4
5
6
7
8
9
10
11
|
/* 此時(shí)我們的750為設(shè)計(jì)圖大小,具體值應(yīng)該跟隨設(shè)計(jì)圖大小來(lái)進(jìn)行設(shè)置 *//* 對(duì)于750/16rem的邏輯為:因?yàn)?6rem為占據(jù)頁(yè)面的總寬,所以750(設(shè)計(jì)圖的寬度)/16rem得出1rem與設(shè)計(jì)圖的等比 *//* 這個(gè)適合我們就可以根據(jù)該元素在設(shè)計(jì)圖的寬度來(lái)設(shè)計(jì)大小啦,例如test的寬高為200px,那么我們就可以這樣來(lái)寫(xiě)： */????@rem:750/16rem;????#test{??????????????width: 200/@rem;??????????????height: 200/@rem;??????????????background: pink;??????????????text-align: center;??????????????line-height: 200/@rem;??????????} |
注意！需要結(jié)合上述的js代碼來(lái)一起使用哦！
二：viewport適配
對(duì)于viewport適配，實(shí)際是更改視口的大小，也就是說(shuō)可以將其當(dāng)作近大遠(yuǎn)小的原理，當(dāng)減小視口寬度之后當(dāng)前元素的可視大小也會(huì)減小，當(dāng)增加視口寬度之后當(dāng)前的元素可視大小會(huì)增大。從而進(jìn)行移動(dòng)端的適配。話不多說(shuō)繼續(xù)上代碼：
js代碼:
|
1
2
3
4
5
6
7
8
9
10
|
(function(){?????????????/* targetW的值為設(shè)計(jì)圖的寬度大小,此時(shí)設(shè)置的寬度大小為640 */????????????var targetW = 640;????????????/* 獲取視口縮放的比例 */????????????var scale = document.documentElement.clientWidth/targetW;????????????/* 獲取到meta標(biāo)簽 */????????????var meta =??? document.querySelector("meta[name='viewport']");????????????/* 向其添加縮放的比例 */????????????meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";????})() |
html與css代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"/>????<title></title>????<style type="text/css">????????*{????????????margin: 0;????????????padding: 0;????????}????????/* 將其寬度設(shè)置為設(shè)計(jì)圖大小的一半(設(shè)計(jì)圖大小為640px),將其高度設(shè)置為100px */????????#test{????????????width: 320px;????????????height: 100px;????????????background: pink;????????????text-align: center;????????????font-size: 32px;????????????line-height: 100px;????????}????</style></head><body>????<div id="test">test</div></body> |
可以看出此時(shí)元素的大小并沒(méi)有發(fā)生改變(因?yàn)槲覀兏淖兊氖且暱诘拇笮〔⒉皇窃氐拇笮?但其仍會(huì)占據(jù)視口的一半(根據(jù)縮放比來(lái)去改變?cè)卦诋?dāng)前界面所占據(jù)的大小)。這就是viewport進(jìn)行移動(dòng)端適配的使用。
viewport適配的原理
viewport適配方案中，每一個(gè)元素在不同設(shè)備上占據(jù)的css像素的個(gè)數(shù)是一樣的。但是css像素和物理像素的比例是不一樣的，等比的*/
- viewport適配的優(yōu)缺點(diǎn)
- 在我們?cè)O(shè)計(jì)圖上所量取的大小即為我們可以設(shè)置的像素大小，即所量即所設(shè)
- 缺點(diǎn)破壞完美視口
本文來(lái)自網(wǎng)絡(luò)，經(jīng)授權(quán)后發(fā)布，本文觀點(diǎn)不代表Infocode藍(lán)暢信息技術(shù)立場(chǎng)，轉(zhuǎn)載請(qǐng)聯(lián)系原作者。
