<!--
rem --r root,em 相对单位，相对于HTML的字体大小单位，可以用于任何设定长度的单位。
可以始终让1rem = 100px
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
}
.d1{
background-color: skyblue;
width: 5rem;
height: 5rem;
}
</style>
</head>
<body>
<div class="d1"></div>
<script>
//动态获取浏览器窗口的宽度，假设设计稿为1000px,设置1rem = 1000px/10=100px，
//则页面1rem = html字体大小 = 浏览器窗口宽度/10
function remFont() {
let screenWidth = window.innerWidth
// 假设设计稿1000px占满屏幕
let danwei = screenWidth/10
let html = document.querySelector('html')
html.style.fontSize = danwei + 'px'
}
// 当屏幕的宽度发生改变
window.onresize = function() {
remFont()
}
//页面刚加载时进行初始化
window.onload = function () {
remFont()
}
</script>
</body>
</html>
rem响应式的布局思想：
- 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
- 高度值可以设置固定值，设计稿有多大，我们就严格有多大
- 所有设置的固定值都用
rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值) - js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了
----（作者：八叉树 链接：https://juejin.im/post/5caaa230e51d452b672f9703 来源：掘金）
1763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
