css 中的 1px 并不等于设备的 1px

在 css 中我们一般使用 px 作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于这点，在文章后面的部分还会讲到。

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。

ok，现在很明确了，你写的1px，在移动端显示的可能是2个物理像素甚至3个物理像素。

移动端1px如何实现

网上能搜到很多实现方案，这里我只推荐一种，最常用的，实用的。

伪类 + transform 实现：
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

stylus 版本

border-1px($color)position: relative&:afterdisplay: blockposition: absolutecontent: ' 'left: 0bottom: 0width: 100%border-top: 1px solid $color
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5).border-1px&::after-webkit-transform: scaleY(0.7)transform: scaleY(0.7)@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2).border-1px&::after-webkit-transform: scaleY(0.5)transform: scaleY(0.5)

使用的时候就是：
1、调用border-1px函数并传递颜色值，2、添加class【border-1px】

<style lang="stylus>divwidth 100pxheight 100pxborder-1px(rgba(7, 17, 27, 0.1))
</style>
<div class="border-1px"></div>

css 版本

.scale-1px{position: relative;border:none;
}
.scale-1px:after{content: '';position: absolute;bottom: 0;background: #000;width: 100%;height: 1px;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0;
}

这里有一个在线的例子：移动端1px

建议使用手机扫码查看：

移动端图片适配

不同分辨率下，使用不同的图片。
dpr 为 2 就使用 2 倍图。
dpr 为 3 就使用 3 倍图。

bg-image($url)background-image: url($url + "@2x.png")@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)background-image: url($url + "@3x.png")

移动端1px 图片相关推荐

html位置下移像素点,吃透移动端 1px的具体用法
最近在写移动端 H5 应用,遇到一个值得记录下来的点.现在从它的由来到实现,我们来聊一下移动端 1px,说 1px 不够准确,应该说成 1 物理像素 . 通过阅读下面文章,你将会理解以下问题: 问题 ...
移动端1px像素实现技巧 - 讲解篇
移动端1px像素问题 - 解决办法: DPI介绍: 定义: DPI 表示(每英寸点数)图像每英寸长度内的点数. DPI(Dots Per Inch,每英寸点数)是一个量度单位,用于点阵数码影像,指每一 ...
移动端1px问题解决方案
移动端1px问题解决方案高清屏中1px线问题在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即是 ...
移动端1px像素问题及解决办法
在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问题.首选先看一下,pc时代和移动 ...
非同款！六种移动端1px “黑眼圈” 解决方案
前言在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即是较经典的移动端1px像素问题. 本文默认你 ...
微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
[css] 移动端1px像素的问题及解决方案是什么？
[css] 移动端1px像素的问题及解决方案是什么? viewport结合rem解决像素比问题比如在devicePixelRatio=2设置meta <meta name="view ...
关于移动端 1px 像素问题
移动端1px变粗的原因移动端html的header总会有一句 <meta name="viewport" content="width=device-width, ...
android pdfjet_GitHub - lnj721/PdfBuilder: Android端使用图片生成PDF文件
PdfBuilder Android端使用图片生成PDF文件一.应用场景从本地选择图片生成pdf文件,由于Android本身并没有对pdf的支持,这里选择使用一个第三方的库来达成需求. 二.库的选 ...

移动端1px 图片

文章目录

css 中的 1px 并不等于设备的 1px

移动端1px如何实现

移动端图片适配

移动端1px 图片相关推荐

最新文章

热门文章