設(shè)計(jì)稿的寬度是1920px(需要適應(yīng)所有屏幕):
image.png
image.png
- 任意尺寸的設(shè)計(jì)稿（自適應(yīng)）
假設(shè)設(shè)計(jì)稿的寬度為XXXpx；
(function () {
var b = document.documentElement,
a = function () {
var a = b.getBoundingClientRect().width;
b.style.fontSize = (a / XXX) * 100+ "px";
}, c = null;
window.addEventListener("resize", function () {
clearTimeout(c);
c = setTimeout(a, 300);
});
a();
})();
這里的b.style.fontSize = (a /XXX) *100+ "px";
假設(shè)a=800,XXX=1000,也就是設(shè)計(jì)稿的寬度為1000px，（移動(dòng)端的）屏幕寬800px;
要對(duì)應(yīng)比例還要適配移動(dòng)端，那么，設(shè)計(jì)稿上的1px在移動(dòng)端上就是0.8px；這個(gè)0.8是(a /XXX)計(jì)算得來(lái)的。
而總不能每次測(cè)量的長(zhǎng)度都乘以0.8吧？這豈不是要累死？這時(shí)，就用到了rem。
給html一個(gè)font-size:0.8px;這時(shí)移動(dòng)端的1rem就等于設(shè)計(jì)稿的1px；
而Chrome瀏覽器，最小字體不得小于12px；
把字體放大100倍即可。就是：(a /XXX)*100
設(shè)置html font-size: (a /XXX)*100 px;就可以來(lái)什么屏適應(yīng)什么屏，pc瀏覽器打開(kāi)這種網(wǎng)頁(yè)的話網(wǎng)頁(yè)尺寸會(huì)隨著瀏覽器窗口寬度的改變而改變
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
<style type="text/css">
*{
margin: auto;
}
html,body{
font-size: 0.8px;
}
.pc{
width: 15.2rem;
/* height: 0.2rem; */
font-size: 0.3rem;
background-color: salmon;
margin: 0 auto;
}
</style>
<body>
<!-- 大屏 + pc 頁(yè)面 -->
<div class="pc" id="main">
Font
<!-- <div class="column">
<div class="bk"></div>
<div class="bk"></div>
<div class="bk"></div>
</div>
<div class="column">
<div class="big-bk"></div>
<div class="big-bk"></div>
</div>
<div class="column">
<div class="bk"></div>
<div class="bk"></div>
<div class="bk"></div>
</div> -->
</div>
</body>
</html>
<script type="text/javascript">
(function () {
var b = document.documentElement,
a = function () {
var a = b.getBoundingClientRect().width;
b.style.fontSize = (a / 1920) * 100+ "px";
}, c = null;
window.addEventListener("resize", function () {
clearTimeout(c);
c = setTimeout(a, 300);
});
a();
})();
</script>
