如果覺(jué)得還有點(diǎn)用凹嘲，請(qǐng)您給我一個(gè)贊堂飞！您的贊是我堅(jiān)持下去的動(dòng)力
拋棄media查詢
當(dāng)你期望你的站點(diǎn)在任何屏幕下都按設(shè)計(jì)稿的原始比例展示的時(shí)候，這里提供2種方案爽篷，分別是:viewport和rem來(lái)解決
方案一 ：viewport
原理
我們經(jīng)常在head里寫的id為viewport的meta標(biāo)簽悴晰，其中initial-scale這個(gè)參數(shù)可以控制瀏覽器強(qiáng)制將頁(yè)面整體縮放一定比例(0.0~1.0)范圍，所以我們可以通過(guò)計(jì)算當(dāng)前視窗寬度和我們?cè)O(shè)計(jì)稿默認(rèn)屏幕寬度的一個(gè)比例逐工，來(lái)放大或縮小整個(gè)頁(yè)面
實(shí)現(xiàn)過(guò)程
開(kāi)發(fā)過(guò)程中按照設(shè)計(jì)稿的尺寸進(jìn)行開(kāi)發(fā)铡溪，比如設(shè)計(jì)稿的屏幕寬度為
750px，上面有一個(gè)按鈕大小為200px*100px泪喊，那么我們css就按照這個(gè)尺寸來(lái)寫在頁(yè)面進(jìn)入的時(shí)候通過(guò)當(dāng)前屏幕寬度和設(shè)計(jì)稿的寬度比例來(lái)調(diào)整縮放比例
<head>
var scale = window.screen.width/750;
var viewport=`<meta id="viewport" name="viewport" content="width=device-width,initial-scale=${scale},user-scalable=no">`
document.write(viewport);
</head>
方案二：rem布局
原理
通過(guò)css的rem單位代替px來(lái)自動(dòng)計(jì)算最終px值棕硫，rem是啥我就不多解釋了，可以自行百度袒啼。
我們默認(rèn)設(shè)置整個(gè)頁(yè)面的html標(biāo)簽的字體大小為100像素 font-size:100px哈扮，這個(gè)時(shí)候如果我們給一個(gè)按鈕寬度設(shè)置 1rem也就相當(dāng)于1*100 px的大小，那么我們只需要改變html標(biāo)簽中的font-size的大小瘤泪，就可以整體控制所有用到rem單位樣式的的縮放比例了
實(shí)現(xiàn)過(guò)程
- 定義 html{font-size:100px}
- 開(kāi)發(fā)過(guò)程中灶泵，根據(jù)設(shè)計(jì)稿上的 尺寸/100 來(lái)計(jì)算出對(duì)應(yīng)的rem值，如設(shè)計(jì)稿上按鈕是200px对途，則轉(zhuǎn)換成
200/100=2rem - 在站點(diǎn)內(nèi)加入計(jì)算比例的代碼赦邻，并且監(jiān)聽(tīng)窗口變化時(shí)，重新調(diào)用代碼計(jì)算比例
- 完整代碼如下：
<style>
html{font-size:100px;}
</style>
<html>
<div style="width:7.50rem;height:.8rem;border:4px solid green"></div>
</html>
<script>
var docEl = document.documentElement;
function reSetRem() {
let w = docEl.clientWidth;
var rem = w * 100 / 750;//這里750設(shè)置成設(shè)計(jì)稿對(duì)應(yīng)的屏幕寬度
docEl.style.fontSize = rem + 'px'
}
window.addEventListener("resize",reSetRem);
reSetRem();
</script>
