设计稿的宽度是1920px(需要适应所有屏幕):
image.png
image.png
- 任意尺寸的设计稿（自适应）
假设设计稿的宽度为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";
假设a=800,XXX=1000,也就是设计稿的宽度为1000px，（移动端的）屏幕宽800px;
要对应比例还要适配移动端，那么，设计稿上的1px在移动端上就是0.8px；这个0.8是(a /XXX)计算得来的。
而总不能每次测量的长度都乘以0.8吧？这岂不是要累死？这时，就用到了rem。
给html一个font-size:0.8px;这时移动端的1rem就等于设计稿的1px；
而Chrome浏览器，最小字体不得小于12px；
把字体放大100倍即可。就是：(a /XXX)*100
设置html font-size: (a /XXX)*100 px;就可以来什么屏适应什么屏，pc浏览器打开这种网页的话网页尺寸会随着浏览器窗口宽度的改变而改变
完整代码：
<!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 页面 -->
<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>
