rem:当前页面中rem单位的样式值都是针对于html元素的font-size的值进行动态计算的;通常情况下设置根元素的font-size为100px,这样方便计算,chrome浏览器的最小font-size值为12px所以设置成10px会有误差。
rem响应式布局页面只在移动端访问,所以不做低版本浏览器的兼容。
html {
font-size:100px; /*1rem=100px*/
}
div{
width:1rem;
height:1rem;
background:red;
}
完全按照设计稿的尺寸(转换成rem)来写样式,按照设计稿的宽度、高度、字体大小、margin、padding的值来写。
根据当前屏幕的宽度和设计稿的宽度动态计算html的font-size的值:
// desW 设计稿尺寸 winW屏幕尺寸
~ function (desW) {
let winW = document.documentElement.clientWidth
let n = winW / desW
document.documentElement.style.fontSize = n * 100 + 'px'
}(750)
网友评论