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物理像素,会模糊

posted @ 2018-11-29 21:04  Du.Du  阅读(3775)  评论(0编辑  收藏  举报