关于px、rem、em、物理像素等

1. 物理像素

　　设备像素，每个设备物理像素出厂已经确定，固定不变

2. css像素px

　　（1）px在屏幕上确定好不会随网页大小改变而改变，相对于一台设备来说是固定的

　  （2）对各个屏幕显示器分辨率而言，px又是不同的，即相对的

3.rem

　　（1）相对于根元素来设定大小

　　（2）用法：根元素设置字体大小，其他元素以rem为单位，谷歌浏览器默认字体大小为16px，则1rem = 16px

　　（3）rem适配：让元素能在不同设备上与屏幕大小的比值相同

var width = document.documentElement.clientWidth //获取屏幕宽度
var htmlNode = document.querySelector('html') // 获取HTML根元素
htmlNode.style.fontSize = width + 'px'

4.em

　　（1）子元素的em相对的是父元素的字体大小（与rem的不同），如下：

　　　　　

　　　　　　　

 

　　　　　　　　　i am son

　　　　　　　　

 i am grandson  

　　　　　　　

 

　　　　　

　　　　　　.father{font-size: 20px}　　

　　　　　　.son{font-size: 2em;width:2em; height:2em; }   /*font-size = 40px;  width = 80px*/

　　　　　　.grandson{width:2em; height: 2em;}  /*width = 80px*/

　　　　　所以em会继承父元素font-size的大小，但会先查看自己元素上是否有font-size

　　　　　总之em根据font-size大小决定，并向上邻近原则查询font-size，而rem只相对根元素font-size来决定

　　总结：（1）rem使用的好处：响应式改变单位值很方便，媒体查询只需改变根标签font-size即可

　　　　　（2）对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

　　　　　（3）对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备　　　　

　　　

相关

标签