1像素下边框引发移动端设备像素比的应用

dantezhao 发布于2019-08-01 18:36 / 1483人阅读

摘要：写在最后用媒体查询实现移动端像素下边框，同样也可以实现移动端调用高清背景图，不同的设置使用的图片的大小不一，用这个方法同样也是可以实现的。

实现1像素下边框，一般的处理方式为：border-bottom: 1px solid color, 这种的处理方式在PC端显示的是1px的下边框，然而放在移动端时就不是1px的大小了，可以能是2px，也可能是1.5px等等，出现这种状况的原因是不同的移动设备的min-device-pixel-ratio的值不一样，以iphone8为例，其min-device-pixel-ratio的值为2，如果某元素的下边框的写法是：border-bottom: 1px solid color，即当PC端显示的是1px的下边框时，在iphone6中显示的就不是1px，而是2px(如果你喜欢我的文章，欢迎评论，欢迎Star~。欢迎关注我的github博客)。

先看看效果图

从上面的效果就可以看到差别，直接border-bottom: 1px solid color，用手机浏览并不是1px，下面讲讲怎么实现移动端1像素下边框，先介绍下device-pixel-ratio的相关知识

device-pixel-ratio介绍

先说说一个比较关键的一个技术：retina，一种新型高分辨率的显示技术，是苹果公司提出来的，可以把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，目前大部分设备都用到了这种技术。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的多带带像素。也被称为视网膜显示屏(device-pixel-ratio > 1)

定义

device-pixel-ratio = physical pixel / device-independent pixels(某一方向，横轴或纵轴),即所谓的设备像素比指的是物理像素与设备独立像素的比例

物理像素：我们说的分辨率，例如iphone8的分辨率750x1334px

独立像素：设备的实际视窗，例如iphone8的视窗375x667px

iphone8的device-pixel-ratio = 750 / 375 = 2

常见设备device-pixel-ratio值

ios设备

无视网膜显示屏设备的device-pixel-ratio值为1，有视网膜显示屏设备的的device-pixel-ratio值为2

Android设备

无视网膜显示屏设备的device-pixel-ratio值为1,有视网膜显示屏设备的的device-pixel-ratio值为1.5或者为3(普遍设备像素比为这2个值)

移动端实现1像素下边框的方法

Media Queries媒体查询

demo


    
        移动端实现1像素下边框

rem布局实现

这里就不介绍rem的实现方法了，如果对rem布局不是很清楚的小伙伴，可以看看我写的另一篇文章，详细的介绍了rem的相关用法。

写在最后

用Media Queries媒体查询实现移动端1像素下边框，同样也可以实现移动端调用高清背景图，不同的设置使用的图片的大小不一，用这个方法同样也是可以实现的。

最后，附上博文地址github地址如果觉得有用的话希望star下，欢迎一起交流，我们一起进步~~~

云服务器 GPU云服务器屏幕像素实际像素像素存储高像素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51855.html

1像素下边框引发移动端设备像素比的应用

摘要：写在最后用媒体查询实现移动端像素下边框，同样也可以实现移动端调用高清背景图，不同的设置使用的图片的大小不一，用这个方法同样也是可以实现的。实现1像素下边框，一般的处理方式为：border-bottom: 1px solid color, 这种的处理方式在PC端显示的是1px的下边框，然而放在移动端时就不是1px的大小了，可以能是2px，也可能是1.5px等等，出现这种状况的原因是不同...

Pluser 2019-08-30 13:59 评论0 收藏0
再谈移动端适配和点5像素的由来

摘要：再谈移动端适配百分比解决方案的缺点在我们的项目中大量的使用百分比来解决页面在宽度上的自适应，其实在高度上并没有很好的自适应。前言这篇文章的内容如题目一样，主要分为两个部分，谈谈业内主流的移动端适配解决方案点5像素的由来和实现方法建议在读这篇文章的时候先读下这篇文章《高清屏概念解析与检测设备像素比的方法_20161005》，因为这些文章涉及的很多概念在这篇文章中都会提到。 ...

lordharrd 2019-08-20 11:31 评论0 收藏0
关于移动端适配，你必须要知道的

摘要：需要注意，上面的尺寸都是屏幕对角线的长度英寸缩写为在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算的为，那它每英寸约含有个物理像素点。导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ... ...

yibinnn 2019-05-21 12:23 评论0 收藏0
关于移动端适配，你必须要知道的

摘要：需要注意，上面的尺寸都是屏幕对角线的长度英寸缩写为在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算的为那它每英寸约含有个物理像素点。导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ... ...

lufficc 2019-08-26 13:48 评论0 收藏0