1像素下边框引发移动端设备像素比的应用
实现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博客)。
<p>先看看效果图</p>
<p>从上面的效果就可以看到差别,直接border-bottom: 1px solid color,用手机浏览并不是1px,下面讲讲怎么实现移动端1像素下边框,先介绍下device-pixel-ratio的相关知识</p>
device-pixel-ratio介绍
<p>
先说说一个比较关键的一个技术:retina,一种新型高分辨率的显示技术,是苹果公司提出来的,可以把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度,目前大部分设备都用到了这种技术。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏(device-pixel-ratio > 1)
</p>
定义
<p>
device-pixel-ratio = physical pixel / device-independent pixels(某一方向,横轴或纵轴),即所谓的设备像素比指的是物理像素与设备独立像素的比例
物理像素:我们说的分辨率,例如iphone8的分辨率750x1334px
独立像素:设备的实际视窗,例如iphone8的视窗375x667px
iphone8的device-pixel-ratio = 750 / 375 = 2
</p>
常见设备device-pixel-ratio值
- ios设备
<p>
无视网膜显示屏设备的device-pixel-ratio值为1,有视网膜显示屏设备的的device-pixel-ratio值为2
</p>
- Android设备
<p>
无视网膜显示屏设备的device-pixel-ratio值为1,有视网膜显示屏设备的的device-pixel-ratio值为1.5或者为3(普遍设备像素比为这2个值)
</p>
移动端实现1像素下边框的方法
- Media Queries媒体查询
demo
<style>.container {width: 100%;height: 30px;position: relative;background-color: yellow;}.container:after {content: " ";position: absolute;left: 0;bottom: 0;width: 100%;border-top: 1px solid red;}@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){.container::after {-webkit-transform: scaleY(0.7);transform: scaleY(0.7);}}@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){.container::after {-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}}@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){.container::after {-webkit-transform: scaleY(0.33);transform: scaleY(0.33);}}</style><div class="container">移动端实现1像素下边框</div>
- rem布局实现
这里就不介绍rem的实现方法了,如果对rem布局不是很清楚的小伙伴,可以看看我写的另一篇文章,详细的介绍了rem的相关用法。
写在最后
<p>
用Media Queries媒体查询实现移动端1像素下边框,同样也可以实现移动端调用高清背景图,不同的设置使用的图片的大小不一,用这个方法同样也是可以实现的。
</p>
最后,附上博文地址github地址如果觉得有用的话希望star下,欢迎一起交流,我们一起进步~~~
1像素下边框引发移动端设备像素比的应用相关推荐
- h5移动端设备像素比dpr介绍
首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device- ...
- css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应
关于 css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应等问题. 目录 **关于 css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,v ...
- 设备像素,设备独立像素,CSS像素
之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理 一些概念 在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...
- 4.设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?
一.背景 在css中我们通常使用px作为单位,在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素 这会造成一种错觉,我们会认为css中的像素就是设备的物理像素 但实际情况却并非如此,css ...
- css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?
一.背景 在css中我们通常使用px作为单位,在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素 这会造成一种错觉,我们会认为css中的像素就是设备的物理像素 但实际情况却并非如此,css ...
- [移动端]移动端设备属性
文章目录 移动端设备的一些属性 尺寸 分辨率 像素 屏幕分辨率 图像分辨率 PPI DPI DIP(设备独立像素) DPR(设备像素比) 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要 ...
- 当我们在讨论设备像素比(device pixel ratio,dpr)的时候我们在讨论什么?
目录 0. 为什么要写这篇文章? 1. 设备像素比的问题在哪里? 1.1. 不同的论述导致不同的理解 1.2. 设备独立像素与CSS像素 1.3. 小结 2. 设备像素比 = 设备物理像素/CSS像素 ...
- 像素相关概念:PPI、DPI、设备像素、独立像素
前言 我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们 ...
- 困扰前端的像素相关概念:PPI、DPI、设备像素、独立像素
我相信对于像素,英文「pixel」,缩写「px」,这个概念并不陌生吧,不管是设计师设计图片用的单位 px,还是前端工程师在 css 里面的单位 px等等,很多领域都会用到这个单位,但是当我问他们一些问 ...
最新文章
- jquery 吐司_jquery – 更改toastr通知的positionclass
- ORACLE基础知识
- SEAndroid策略介绍1
- 混合云计算和联合云计算
- Gartner Magic Quadrant for Enterprise Network Firewall (2018,2017,2016,2015,2014,2013,2011,2010)
- python列表切片后得到剩余列表_python列表切片和嵌套列表取值操作详解
- SharePoint at .NET技术大会
- 每日一题(32)—— 联合体大小
- 【youcans 的 OpenCV 例程 200 篇】102. 陷波带阻滤波器的传递函数
- Windows下搭建Wampserver+WordPress
- Netty:Netty不断打开文件的BUG
- win10cmd输入java_win10肿么输入cmd 输入java
- gRPC Mock Server
- 一个美国ECO PHD两年的学习总结
- C++_SHFileOperation文件夹操作
- GoF总结-18(状态模式)
- java isbn_Java ISBN formating
- windows 技巧篇-解除共享文件夹占用方法,解决共享文件被占用导致不可修改问题,查看共享文件被谁占用方法
- IE里面的画笔---VML(Vector Markup Language)入门之一
- 线程池满Thread pool exhausted排查和解决