文章目录
rem
rem 是指根元素(root element)的字体大小。根元素就是我们所说的html元素,默认的情况下,根元素字体的字体大小是16px;
那我们做移动端的响应式开发,如果纯粹用之前所说的媒体查询,那么我们的代码就会很多,写起来也不是很方便。那么怎么办呢? 我们就可以结合我们的rem。
rem做移动端的思想? 当我们拿到设计稿的时候,如果可以按照设计稿的尺寸去写,然后通过更改一个值,就能更改页面中所写的css,那是不是会很方便,rem刚好就是。 1rem=html的字体大小(默认情况下是16px);
如果我们随着移动端屏幕的改变,然后改变下html的字体大小,就可以达到刚才的目的。
屏幕的宽度/设计稿的尺寸=x/100; 根据这个计算公式我们是不是可以算出移动端屏幕改变时候的根元素应该具有的字体大小。
<script>
(function () {
function computed() {
// 获取屏幕的宽度
var win = document.documentElement.clientWidth || document.body.clientWidth;
// 设计稿的尺寸
var des = 640;
// 如果屏幕的宽度>=设计稿的尺寸,我们
if (win >= des) {
document.documentElement.style.fontSize ="100px";
return;
}
//设置根元素的字体大小
document.documentElement.style.fontSize = win / des * 100 + "px";
}
computed();
window.onresize=function(){
computed();
}
})();
</script>