CSS学习笔记之rem学习

px是一个绝对单位,不管屏幕怎么变化,大小固定;

rem是一个相对单位,相对于html的font-size大小设置的;

根据屏幕大小设置html的fontSize;

一般设计稿默认的html的fontSize是100px,因为比较好计算;

fontSize最小值是12px,所以不能是10px;

写CSS样式的时候只需要将设计稿的值除以100,变成rem单位即可;

在js中加上

var W = document.documentElement.clientWidth || document.body.clientWidth;
var dW = 640;
document.documentElement.style.fontSize = W * 100 / dW + "px;"

假设设计稿定义宽度是640;

这样就会根据屏幕大自动设置html的fontSize了;

PC端的话浏览器窗口会发生变化,所以要加在window.onresize事件中,只要浏览器窗口发生改变就重新计算fontSize的值;