关于移动端 1px 像素问题

移动端1px变粗的原因

移动端html的header总会有一句
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的，viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长

解决方案

1、IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {.border { border: 0.333333px solid #999 }
}

2、:after伪类方法

.border{position:relative;}
.border:after{position: absolute;display: block;left: 0;bottom: 0;width: 100%;border-top: 1px solid rgba(7,17,27,0.1);content: ' ';}

关于移动端 1px 像素问题相关推荐

[css] 移动端1px像素的问题及解决方案是什么？
[css] 移动端1px像素的问题及解决方案是什么? viewport结合rem解决像素比问题比如在devicePixelRatio=2设置meta <meta name="view ...
移动端1px像素实现技巧 - 讲解篇
移动端1px像素问题 - 解决办法: DPI介绍: 定义: DPI 表示(每英寸点数)图像每英寸长度内的点数. DPI(Dots Per Inch,每英寸点数)是一个量度单位,用于点阵数码影像,指每一 ...
移动端1px像素问题及解决办法
在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问题.首选先看一下,pc时代和移动 ...
移动端1px像素的设置？
1px解决方案-:before, :after与transform 之前说的frozenUI的圆角边框就是采用这种方式, 构建1个伪元素, 将它的长宽放大到2倍, 边框宽度设置为1px, 再以tran ...
移动端1px问题解决方案
移动端1px问题解决方案高清屏中1px线问题在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即是 ...
非同款！六种移动端1px “黑眼圈” 解决方案
前言在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即是较经典的移动端1px像素问题. 本文默认你 ...
html位置下移像素点,吃透移动端 1px的具体用法
最近在写移动端 H5 应用,遇到一个值得记录下来的点.现在从它的由来到实现,我们来聊一下移动端 1px,说 1px 不够准确,应该说成 1 物理像素 . 通过阅读下面文章,你将会理解以下问题: 问题 ...
手机1像素线粗_关于移动端一像素线的解决方案
为什么会有一像素线这个问题因为移动端布局我们大家都知道根据不同的手机会有不同的dpr 例如爱疯6plus就是3 爱疯6就是2 当我们定义1px的时候就会在不同手机里面显示不同的粗细长度,dpr为 ...
移动端1px线适配问题-------适配各种编译CSS工具 stylus sass styled-componet实现方法...
其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的, 首先我还是先介绍一下原理和所依赖的方法原理:其实他们都是通过css3的媒体查询来实现的步骤思路: 1.给目标 ...

关于移动端 1px 像素问题

移动端1px变粗的原因

解决方案

关于移动端 1px 像素问题相关推荐

最新文章

热门文章