假设设计稿为750,用rem做自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 先获得设备的缩放比:
var ratio = window.devicePixelRatio;
var meta = document.querySelector("[name=viewport]")
// 缩放程度等于设备缩放比分之一
meta.setAttribute("content", `with=device-width,initial-scale=${1/ratio},user-scalable=no`)
/* 去动态设计 fontSize */
/* 动态的fontSize = 设备宽度/设计稿宽度*100 */
/* window.innerWidth 设备可布局宽度 */
document.documentElement.style.fontSize = window.innerWidth/750*100+"px"
</script>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 100px;
}
.box {
width: 7.5rem;
height: 1rem;
background: red;
}
</style>
</head>
<body>
<!-- 1rem是根节点的fontSize
设计稿匹配分辨率
动态计算的fontSize
-->
<div class="box">
</div>
</body>
</html>