码迷,mamicode.com
                                                                              首页 > Web开发 > 详细

                                                                              CSS中的px与物理像素、逻辑像素、1px边框问题

                                                                              时间:2018-08-02 01:51:25      阅读:5705      评论:0      收藏:0      [点我收藏+]

                                                                              标签:面试   物理   宽高   两种   艺术   代码   直接   end   scale   

                                                                              一直不太清楚CSS中的1px与逻辑像素、物理像素是个什么关系(作为一名前端感觉很惭愧 -_-!),今天终于花时间彻底弄清楚了,其实弄清楚之后就觉得事情很简单,但也只有在弄清楚之后,才会觉得简单(语出《禅与摩托车维修艺术》,哈哈哈哈)。

                                                                              两种像素

                                                                              物理像素:设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点,高度方向有1334个像素点,所以iPhone 6 总共有750*1334个物理像素。

                                                                              逻辑像素:也叫“设备独立像素”(Device Independent Pixel, DIP),可以理解为反映在CSS/JS代码里的像素点数。

                                                                              设备像素比(Device Pixel Ratio, DPR):一个设备的物理像素与逻辑像素之比。

                                                                              像素还分物理和逻辑?这两个玩意有啥区别?

                                                                              其实在很久以前,的确是没区别的,CSS里写个1px,屏幕就给你渲染成1个实际的像素点,DPR=1,多么简单自然~

                                                                              但是后来事情起了变化,搞事的就是Retina技术,这种技术使用4个乃至更多物理像素来渲染1个逻辑像素,这样一来,同样的CSS代码设置的尺寸,在Retina和非Retina屏幕上看起来大小是一样的,但在Retina屏幕上要精细得多。

                                                                              技术分享图片

                                                                              在Retian屏上,DPR不再是1,而是大于1,比如2(iPhone 5 6 7 8)或3(iPhone 6 Plus等一系列Plus)或者为非整数(一些Android机),说不定还会涨。

                                                                              举个例子,iPhone 6的物理像素上面已经说了,是750*1334,那它的逻辑像素呢?我们只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了,结果是 375*667,这就是它的逻辑像素,据此很容易计算出DRP为2。?#27604;唬?#25105;们还可以直接通过window.devicePixelRatio这个值来获取DRP,打印结果是2,符合我们的预期。

                                                                              奇葩的iPhone 6 Plus

                                                                              这里不得不提一下iPhone 6 Plus(以及同尺寸的其他果机),它的实际物理像素点个数是1080*1920,但如果你截个屏,你会发现截屏图片的宽高是1242*2208;浏览器的screen对象会告诉你,6 Plus的逻辑像素是414*736,正好是截屏宽度的三分之一,window.devicePixelRatio值也为3。

                                                                              所以现在我们有了3种不同的像素值?什么情况?

                                                                              是这样的,iPhone 6 Plus系统定义的屏幕像素就是1242*2208,系统会自动把这些像素点塞进1080*1920个实际像素点来渲染,这个过程对于开发者是透明的,无需理会。

                                                                              所以对于前端来说,可以直接把1242?#28216;? Plus的“物理像素”,包括UE小姐姐们出图也是以1242为标准的,因此不妨把1242*2208称为6 Plus的“设计像素”。

                                                                              ?#36824;?#36825;是要闹那样?

                                                                              其实,当初?#36824;?#20844;司在确定6 Plus的DRP时,纠结了半天:选2吧,同样的字号在6 Plus上看起来比6更小,不好;选3吧,字又显得太大了,导致一屏能展示的内容还没有6多;最适合视觉的DRP值是2.46,但这样一个数字能把设计师和程序员们逼疯。最后就想出了引入“设计像素”这样一个两全其美的方案,既让开发者开心,又让?#27809;?#29245;,岂不美哉?

                                                                              1px边框问题

                                                                              在?#36824;?#30340;带动下,Retina技术在移动设备上已经成了标配,所以前端攻城狮必须直面如下事实:

                                                                              1. 你想画个1px的下边框,但屏幕硬是塞给你一条宽度为2—3个物理像素的线。
                                                                              2. 你没法像安卓或iOS的同事那样直接操纵物理像素点。

                                                                              这就是初级前端面?#21592;?#32771;题之“1px边框问题”的由来。

                                                                              1px边框问题的解法千奇百怪,各显神通,但以我的实践经验,最推崇的方法还是利用CSS3的transform: scale,因为简单直接、适用性和兼容性好。

                                                                              你不是给我两个物理像素点吗?#32771;?#20010;transform: scale(0.5),只剩一个点了~

                                                                              三个物理像素点?那就scale(0.33)!

                                                                              使用CSS的-webkit-min-device-pixel-ratio媒体查询可以针对不同的DPR做出处理 ,下面以Less代码为例:

                                                                              @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
                                                                                  .border-bt-1px(@color) {
                                                                                      position: relative;
                                                                                      &::after {
                                                                                          position: absolute;
                                                                                          bottom: 0;
                                                                                          width: 100%;
                                                                                          height: 1px;
                                                                                          background-color: @color;
                                                                                          transform: scaleY(0.5);
                                                                                      }
                                                                                  }
                                                                              }

                                                                              上面介绍的是只有一边的情景,如果是四面都要有框,咋办?

                                                                              那就画个DPR倍大小的矩形框,再scale一下,完事~

                                                                               

                                                                              至此,本文的关于像素的知识,应是足够应对一般前端的工作需要了。

                                                                              CSS中的px与物理像素、逻辑像素、1px边框问题

                                                                              标签:面试   物理   宽高   两种   艺术   代码   直接   end   scale   

                                                                              原文地址:https://www.cnblogs.com/leegent/p/9404572.html

                                                                              (0)
                                                                              (3)
                                                                                 
                                                                              举报
                                                                              评论 一句话评论(0
                                                                              0条  
                                                                              登录后才能评论!
                                                                              ? 2014 mamicode.com 版权所有 京ICP备13008772号-2
                                                                              迷上了代码!
                                                                              宁夏11选5开奖查询