在做移動(dòng)端的項(xiàng)目時(shí)，適配是第一步，最開(kāi)始寫(xiě)移動(dòng)端網(wǎng)頁(yè)的時(shí)候?qū)W習(xí)Bootstrap響應(yīng)式設(shè)計(jì)的做法，使用media標(biāo)簽寫(xiě)適配來(lái)改變font-size，于是便會(huì)有下面這種代碼：
@media (max-width:992px){
body,html{
font-size:15px;
}
}
@media (max-width:767px){
body,html{
font-size:20px;
}
}
@media (max-width:414px){
body,html{
font-size:18px;
}
}
@media (max-width:360px){
body,html{
font-size:16px;
}
}
市場(chǎng)上各種屏幕的分辨率遠(yuǎn)不止這幾個(gè)蜒什，所以這樣寫(xiě)一方面是工作量很大很機(jī)械，另一方面是不夠準(zhǔn)確疤估，但是media查詢這種處理方式在處理PC端兼容移動(dòng)端的時(shí)候還是很樂(lè)觀的灾常，有的小型網(wǎng)站為了節(jié)省成本便于維護(hù)就是采用的bootstrap這種做法，一個(gè)網(wǎng)頁(yè)在pc端可能橫排顯示六個(gè)铃拇，但到了移動(dòng)端就顯示三個(gè)钞瀑，這樣更加美觀，而如果直接修改body的font-size便是整體擴(kuò)大或縮小慷荔，就達(dá)不到一套布局兩種顯示的效果雕什。
如果是單純只在移動(dòng)端顯示的頁(yè)面，那么我們 動(dòng)態(tài)修改頁(yè)面body的font-size值 是最好的處理方法,目前淘寶移動(dòng)端也是這么處理的显晶。
在樣式表里贷岸，我們?cè)O(shè)置width,font-size,border-width等一切以px為單位的屬性，只需要按照設(shè)計(jì)稿標(biāo)注的大小然后除以我們自定義的基數(shù)便好磷雇，為了換算方便偿警，我習(xí)慣定義基數(shù)為100（下面js里設(shè)置的100），那么假設(shè)一個(gè)元素在設(shè)計(jì)稿標(biāo)注上寬是200px唯笙，那么我們寫(xiě)width:2rem就OK（200/100=2）户敬。下面是處理的步驟：
1.在頁(yè)面引入"viewport"屬性,這些屬性可根據(jù)自己的需要修改
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
2.在<head></head>標(biāo)簽里引入動(dòng)態(tài)修改font-size的代碼落剪，此段需要優(yōu)先加載，以免頁(yè)面布局錯(cuò)亂
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
/*設(shè)置一個(gè)屏幕最大寬度臨界值尿庐，當(dāng)大于這個(gè)寬度時(shí)，字體也不放大了*/
if(clientWidth>=640){
docEl.style.fontSize = '85px';
}else{
/*750是設(shè)計(jì)稿的寬度呢堰，100是基數(shù)為了方便換算抄瑟，也可以為20，或者瀏覽器默認(rèn)值16(px)*/
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
最后效果圖長(zhǎng)這樣：
附上效果圖的源代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>移動(dòng)端適配動(dòng)態(tài)修改頁(yè)面font-size</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.news-list > h4 {
padding: .3rem .2rem;
font-size: .32rem;
border-bottom: 1px solid #d2d2d2;
}
.news-list ul li{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-left: .2rem;
padding: .45rem .3rem .45rem 0;
border-bottom: 1px solid #d2d2d2;
font-size: .3rem;
color: #4e4e4e;
}
.news-list ul li .left{
margin-right: .4rem;
}
.news-list ul li .left span{
display: block;
width: 1.8rem;
height: 1.2rem;
background-color: #d2d2d2;
}
.news-list ul li .right{
width: 100%;
}
.news-list ul li .right h4{
font-weight: normal;
margin-top: -.1rem;
margin-bottom: .12rem;
}
.news-list ul li .right div{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.news-list ul li .right div span{
display: inline-block;
font-size: .24rem;
}
.news-list ul li .right div span:first-of-type{
padding: .02rem .04rem;
background-color: #4a6efc;
color: #fff;
}
</style>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '85px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</head>
<body>
<div class="news-list">
<h4>新聞列表</h4>
<ul id="newsList">
<li class="flex">
<div class="left">
<span></span>
</div>
<div class="right">
<h4>德國(guó)iPhone禁售令的最新相關(guān)信息</h4>
<div class="flex">
<span>今日熱點(diǎn)</span>
<span>2018-12-21</span>
</div>
</div>
</li>
<li class="flex">
<div class="left">
<span></span>
</div>
<div class="right">
<h4>RNG戰(zhàn)勝EDG的最新相關(guān)信息RNG戰(zhàn)勝EDG是怎么回事</h4>
<div class="flex">
<span>今日熱點(diǎn)</span>
<span>2018-12-21</span>
</div>
</div>
</li>
<li class="flex">
<div class="left">
<span></span>
</div>
<div class="right">
<h4>德國(guó)iPhone禁售令的最新相關(guān)信息</h4>
<div class="flex">
<span>今日熱點(diǎn)</span>
<span>2018-12-21</span>
</div>
</div>
</li>
<li class="flex">
<div class="left">
<span></span>
</div>
<div class="right">
<h4>RNG戰(zhàn)勝EDG的最新相關(guān)信息RNG戰(zhàn)勝EDG是怎么回事</h4>
<div class="flex">
<span>今日熱點(diǎn)</span>
<span>2018-12-21</span>
</div>
</div>
</li>
<li class="flex">
<div class="left">
<span></span>
</div>
<div class="right">
<h4>德國(guó)iPhone禁售令的最新相關(guān)信息</h4>
<div class="flex">
<span>今日熱點(diǎn)</span>
<span>2018-12-21</span>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
移動(dòng)端適配的方案有很多枉疼，下面是幾篇講解得很詳細(xì)的博客皮假，歡迎大家參考：
https://blog.csdn.net/ws379374000/article/details/78686101
https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
原文作者技術(shù)博客：http://www.reibang.com/u/ac4daaeecdfe
95后前端妹子一枚，愛(ài)閱讀骂维，愛(ài)交友惹资，將工作中遇到的問(wèn)題記錄在這里，希望給每一個(gè)看到的你能帶來(lái)一點(diǎn)幫助航闺。
歡迎留言交流褪测。
