CSS3新单位——rem学习

2023-04-03 20:20:10

近期，公司招了一个前端，看他的代码时，有特别多的rem作为单位。对于我这种H5小菜鸟来说，没有办法，又被强制学习了一波。

rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位。而根节点就是<html>节点。

html{font-size:100px};
1rem=100px;

复制

如果没有对根节点的font-size复制，则rem使用默认值16px。即

1rem=16px

。

rem可以很好解决webApp不同屏幕的适配问题，只要动态改变font-size的值，就可以应对不同的屏幕分辨率。

html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始样式必须写在最顶部！！！！如果写在媒体查询底部的话就会覆盖上方的媒体查询（因为是层叠样式表嘛~）
@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

复制

提供一个动态获取屏幕宽度并且为font-size赋值的方法。

let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlwidth / 10 + 'px';
window.addEventListener('resize', (e) => {
  let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;
  let htmlDom = document.getElementsByTagName('html')[0];
  htmlDom.style.fontSize = htmlwidth / 10 + 'px';
})

复制