css 单位中有相对大小和绝对大小,px em 等等,但是css3出现了一个新的单位 —rem ,
rem单位是根据html元素的font-size相对大小的,1rem = font-size * 1(html的字体大小)
运用在移动端的适配
html文件中如下:
function rem() {
let width = document.documentElement.getBoundingClientRect().width
document.getElementsByTagName('html')[0].style.fontSize = width * 100 / 750 + 'px'
//750是设计稿的宽度,width 是设备的实际宽度,100是代表1rem = 100px
console.log(width)
}
rem();
window.onresize = function() {
rem()
}
scss中的文件
@function rem($px) {
@return $px/100 + rem
}
例如:
margin: rem(10);