這是我之前一直使用的第一種rem方案激况。貼代碼
<script>
// 適用于750的設(shè)計稿
var iScale = 1;
// 通過頁面加載的時候去獲取用戶設(shè)備的物理像素比
iScale = iScale / window.devicePixelRatio;
// 然后來設(shè)置html的<meta>表現(xiàn)的縮放屬性，從而達(dá)到在任意頁面實現(xiàn)頁面布局的自適應(yīng)的效果
document.write('<meta name="viewport" content="width=device-width,' +
'initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + ',user-scalable=no" />')
// 獲取瀏覽器窗口文檔顯示區(qū)域的寬度，不包括滾動條誉碴。
var iWidth = document.documentElement.clientWidth;
// 設(shè)置頁面基礎(chǔ)的字體大小
document.getElementsByTagName('html')[0].style.fontSize = iWidth / 15 + 'px';
</script>
- 這段代碼的意思就是宦棺，通過頁面加載的時候去獲取用戶設(shè)備的物理像素比，然后來設(shè)置html的<meta>表現(xiàn)的縮放屬性黔帕，從而達(dá)到在任意頁面實現(xiàn)頁面布局的自適應(yīng)的效果代咸，下面的設(shè)置頁面基本字體的我設(shè)置的除以15，在iPhone6上面的font-size = 50px成黄；也就是1rem = 50px呐芥；別問我為什么這么設(shè)置，全是因為個人習(xí)慣奋岁。
- 關(guān)于設(shè)備的物理像素比思瘟，如果有不懂的同學(xué)，我推薦大家去研讀一下張鑫旭老師寫的一篇文檔闻伶，關(guān)于設(shè)備物理像素比的滨攻，里面說的很詳細(xì)，下面是物理像素比的介紹
下面說一下我在使用第一種方案遇到的問題蓝翰。
- 在我平時在任何的手機(jī)瀏覽器的頁面中光绕，不管是pc端的瀏覽器，還是手機(jī)自帶的瀏覽器畜份，都是可以自適應(yīng)的縮放頁面诞帐，達(dá)到的效果也是理想的。這個就不跟demo了爆雹。
- 后來我再工作中一直也是這么用的停蕉，在一次和app開發(fā)的小伙伴合作的時候，因為頁面是內(nèi)嵌在app里面钙态，app開發(fā)的時候慧起，會默認(rèn)的對瀏覽器的使用會做一些默認(rèn)的設(shè)置，就比如下面的這一條屬性：
WebSettings.setUseWideViewPort(true);//設(shè)置此屬性驯绎，可任意比例縮放,一般的安卓的app的開發(fā)者都會默認(rèn)禁止這條屬性完慧；說是會對其他的東西有影響。那么這樣的話剩失，就不能夠?qū)崿F(xiàn)任意比例的縮放了屈尼，也當(dāng)然達(dá)不到我們想要的結(jié)果。
后來我又找到我現(xiàn)在使用的第二種rem方案拴孤。貼代碼
<script>
var docEl = document.documentElement,
//當(dāng)設(shè)備的方向變化（設(shè)備橫向持或縱向持）此事件被觸發(fā)脾歧。綁定此事件時，
//注意現(xiàn)在當(dāng)瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件演熟。
//總來的來就是監(jiān)聽當(dāng)前窗口的變化鞭执，一旦有變化就需要重新設(shè)置根字體的值
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//設(shè)置根字體大小1:50適用于375的設(shè)計稿司顿，需要變更，就更改基礎(chǔ)字體的數(shù)值
docEl.style.fontSize = 100 * (docEl.clientWidth / 750) + 'px';
};
//綁定瀏覽器縮放與加載時間
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>
第二個方案相比第一個方案來說有兩個有點兄纺。
- 更加的方便大溜，因為監(jiān)聽了當(dāng)前窗口的變化而執(zhí)行js代碼，更加的便捷估脆。
- 不用依賴標(biāo)簽<meta>的縮放大小的屬性钦奋，可以直接寫為
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">這樣就可以了。這樣就避免了在app中安卓禁止頁面任意比例縮放后疙赠，頁面不能自適應(yīng)的這個bug付材。
給大家上一個小的demo希望給大家一些直觀的感受，不要問為什么不給鏈接圃阳！
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8">
<title>我姓李名乾坤</title>
<script type="text/javascript">
var docEl = document.documentElement,
//當(dāng)設(shè)備的方向變化（設(shè)備橫向持或縱向持）此事件被觸發(fā)厌衔。綁定此事件時，
//注意現(xiàn)在當(dāng)瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件捍岳。
//總來的來就是監(jiān)聽當(dāng)前窗口的變化富寿，一旦有變化就需要重新設(shè)置根字體的值
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//設(shè)置根字體大小
docEl.style.fontSize = 100 * (docEl.clientWidth / 750) + 'px';
};
//綁定瀏覽器縮放與加載時間
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
background: white;
margin-top: .01rem;
}
html,
body {
font-family: "微軟雅黑";
width: 100%;
height: 100%;
background: #E9E9E9;
}
.left {
float: left;
}
.loan {
width: 7.2rem;
}
.loan>li {
width: 7.5rem;
height: 1.99rem;
border-bottom: 1px solid #E9E9E9;
}
.logoBox {
width: 1.45rem;
height: 1.57rem;
padding-left: .3rem;
padding-top: .4rem;
}
.logoBox>img {
width: 1.17rem;
height: 1.17rem;
}
.contentBox {
width: 4.5rem;
height: 1.17rem;
padding-top: .4rem;
}
.Name {
width: 4.5rem;
height: .5rem;
line-height: .5rem;
font-size: .3rem;
color: #333333;
}
.description {
width: 4.5rem;
height: .22rem;
line-height: .22rem;
font-size: .22rem;
color: #666666;
margin-bottom: .1rem;
}
.contentBox>span {
padding: .05rem .06rem;
font-size: .14rem;
line-height: .14rem;
color: #fc936d;
background: #fff4f0;
margin-right: .05rem;
}
.optBtn {
width: 1.1rem;
height: .4rem;
line-height: .4rem;
text-align: center;
background: #FFFFFF;
font-size: .22rem;
color: #fc936d;
margin-top: 1rem;
border-radius: .1rem;
}
</style>
</head>
<body>
<ul class="loan">
<li id="paipaidai">
<div class="logoBox left">
</div>
<div class="contentBox left">
<p class="Name">貼代碼</p>
<p class="description">貼代碼，貼代碼</p>
<span class="left">貼代碼</span>
<span class="left">貼代碼</span>
<span class="left">貼代碼</span>
</div>
<div class="optBtn left">喜歡代碼</div>
</li>
<li id="paipaidai">
<div class="logoBox left">
</div>
<div class="contentBox left">
<p class="Name">貼代碼</p>
<p class="description">貼代碼锣夹，貼代碼</p>
<span class="left">貼代碼</span>
<span class="left">貼代碼</span>
<span class="left">貼代碼</span>
</div>
<div class="optBtn left">喜歡代碼</div>
</li>
<li id="paipaidai">
<div class="logoBox left">
</div>
<div class="contentBox left">
<p class="Name">貼代碼</p>
<p class="description">貼代碼作喘，貼代碼</p>
<span class="left">貼代碼</span>
<span class="left">貼代碼</span>
<span class="left">貼代碼</span>
</div>
<div class="optBtn left">喜歡代碼</div>
</li>
</ul>
</body>
</html>
其實第二個方案來說還有一個缺點，第一個方案也同樣具有：就是當(dāng)app的開發(fā)者禁止調(diào)用我們前端開發(fā)的界面使用js的時候晕城，那我們的rem方案就有不能自適應(yīng)了，因為我們知道我們是設(shè)置了頁面的基礎(chǔ)字體的大小來達(dá)到自適應(yīng)的目的窖贤，那么瀏覽器默認(rèn)的rem和px的比例應(yīng)該是1:16的比例砖顷。當(dāng)靜止js的時候，頁面就還原成為原始的比例赃梧，而我們設(shè)置的一般,為了更好的計算都是1:50或者是1:100滤蝠，那這樣頁面就會整體的顯得縮小了很多，但是頁面布局還是沒有亂的授嘀。（那么有同學(xué)問了物咳，既然我們知道問題所在了，那為什么不把頁面基礎(chǔ)字體的大小設(shè)置成和默認(rèn)的差不多然后不就無敵了蹄皱？那下面就有了第三種的方案）
這是第三種rem方案览闰。貼代碼
window.onload=function(){var e=(document.documentElement.clientWidth>=640?640:document.documentElement.clientWidth)/320*12;document.documentElement.clientHeight;document.getElementsByTagName("html")[0].style.fontSize=e+"px"};
這種方案的的好處是它的rem和px比值在瀏覽器模擬機(jī)器上面的比值是1:12，其數(shù)值大小也同樣是可以調(diào)整的巷折，這樣的做的好處就是，在安卓原生的app上面，即使app的開發(fā)者禁止了js的使用队萤，也可以做到一個相對的自適應(yīng)下愈，效果要比前面的兩個要好一點击蹲，但是缺點就是px和rem之間的換算有點麻煩。
總結(jié)
不知道上面的分享有沒有幫助到你婉宰，你要是問我有沒有推薦的歌豺，我已經(jīng)把適用的場景說的很明白了。你可以自己選擇心包，我現(xiàn)在一般是用的第二種的类咧。
希望能幫助到你們~如果有什么問題，請大家多多指出谴咸。
