关于pxremem物理像素等

Posted 活到老学到老的李小小

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于pxremem物理像素等相关的知识,希望对你有一定的参考价值。

1. 物理像素

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

2. css像素px

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

   (2)对各个屏幕显示器分辨率而言,px又是不同的,即相对的

3.rem

  (1)相对于根元素<html>来设定大小

  (2)用法:根元素设置字体大小,其他元素以rem为单位,谷歌浏览器默认字体大小为16px,则1rem = 16px

4.em

  (1)子元素的em相对的是父元素的字体大小(与rem的不同),如下:

     <div class =\'father\'>

       <div class = \'son\'> 

         i am son

        <div class = \'grandson\'> i am grandson   </div>

       </div> 

     </div>

      .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等分辨率差别比较挺大的设备    

 

   

以上是关于关于pxremem物理像素等的主要内容,如果未能解决你的问题,请参考以下文章

前端关于移动端屏幕适配

关于dpr的理解

44 像素的宽度是不是等同于所有设备的相同物理尺寸?

位图像素

针对iPhone的ptAndroid的dpHTML的css像素与dpr设计尺寸和物理像素的浅分析

移动端1物理像素的实现