rem、em 、font-size随着屏幕大小的改变而改变
rem 的根标签是html
以html标签上设置的font-size的值为参考点
如:
<div id="app">
<div id="son></div>
</div>
html{ font-size:20px; }
#app{
width :4rem; ===>4*20=80px
}
#son {
width :2rem; ===>2*20 =40px
}
如果html的font-size 的值能随便屏幕的大小变化而变化
以下js代码放在头部,不要放body里
<script> resetrem(); //切换屏幕 (横屏竖屏) window.addEventListener("orientationchange", resetrem); //resize:屏幕的大小发生改变就触发监听事件resetrem window.addEventListener("resize",resetrem);
function resetrem(){ var html = document.querySelector("html");//获取到html元素 var width = html.getBoundingClientRect().width;//获取屏幕的宽度 html.style.fontSize = width/16+"px"; } </script>
UI图 width:414px,则css样式
在Ihone6/7/8 font-size=25.875px
{
width:16 rem; ==>414 / 25.875
}
em 根据父元素改变值
以父元素为参考点
比如:
<div id="app">
<div id="son></div>
</div>
#app{
font-size:10px;
}
#son{
font-size:1em; ==>1*10=10px
}
物理像素和css像素
正常情况下 1物理像素=1css像素
放大的时候 1css像素=3物理像素,会模糊