招代理的网站要怎么做,旅游景区网站建设方案文档,设计教程网,wordpress主题开拓右边栏一直不太清楚CSS中的1px与逻辑像素、物理像素是个什么关系#xff08;作为一名前端感觉很惭愧 -_-#xff01;#xff09;#xff0c;今天终于花时间彻底弄清楚了#xff0c;其实弄清楚之后就觉得事情很简单#xff0c;但也只有在弄清楚之后#xff0c;才会觉得简单作为一名前端感觉很惭愧 -_-今天终于花时间彻底弄清楚了其实弄清楚之后就觉得事情很简单但也只有在弄清楚之后才会觉得简单语出《禅与摩托车维修艺术》哈哈哈哈。 两种像素 物理像素设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点高度方向有1334个像素点所以iPhone 6 总共有750*1334个物理像素。 逻辑像素也叫“设备独立像素”Device Independent Pixel, DIP可以理解为反映在CSS/JS代码里的像素点数。 设备像素比Device Pixel Ratio, DPR一个设备的物理像素与逻辑像素之比。 像素还分物理和逻辑这两个玩意有啥区别 其实在很久以前的确是没区别的CSS里写个1px屏幕就给你渲染成1个实际的像素点DPR1多么简单自然~ 但是后来事情起了变化搞事的就是Retina技术这种技术使用4个乃至更多物理像素来渲染1个逻辑像素这样一来同样的CSS代码设置的尺寸在Retina和非Retina屏幕上看起来大小是一样的但在Retina屏幕上要精细得多。 在Retian屏上DPR不再是1而是大于1比如2iPhone 5 6 7 8或3iPhone 6 Plus等一系列Plus或者为非整数一些Android机说不定还会涨。 举个例子iPhone 6的物理像素上面已经说了是750*1334那它的逻辑像素呢我们只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了结果是 375*667这就是它的逻辑像素据此很容易计算出DRP为2。当然我们还可以直接通过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视为6 Plus的“物理像素”包括UE小姐姐们出图也是以1242为标准的因此不妨把1242*2208称为6 Plus的“设计像素”。 苹果这是要闹那样 其实当初苹果公司在确定6 Plus的DRP时纠结了半天选2吧同样的字号在6 Plus上看起来比6更小不好选3吧字又显得太大了导致一屏能展示的内容还没有6多最适合视觉的DRP值是2.46但这样一个数字能把设计师和程序员们逼疯。最后就想出了引入“设计像素”这样一个两全其美的方案既让开发者开心又让用户爽岂不美哉 1px边框问题 在苹果的带动下Retina技术在移动设备上已经成了标配所以前端攻城狮必须直面如下事实 你想画个1px的下边框但屏幕硬是塞给你一条宽度为2—3个物理像素的线。你没法像安卓或iOS的同事那样直接操纵物理像素点。这就是初级前端面试必考题之“1px边框问题”的由来。 1px边框问题的解法千奇百怪各显神通但以我的实践经验最推崇的方法还是利用CSS3的transform: scale因为简单直接、适用性和兼容性好。 你不是给我两个物理像素点吗加个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 转载于:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10156680.html
