布局方面，css有那么几个比较热衷的问题。其中，移动端1px边框问题的讨论不亚于垂直居中。那么移动端1px边框问题是如何产生的呢？由于现在的手机几乎都是retina屏，css设置的1px会被渲染成2px的物理像素（针对像素比等于2的屏幕），因此看起来会比较粗。既然知道了问题的产生原因 ...

在retina屏中，像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的边框看起来比真的1px更宽。 使用伪类加transform的方式 元素本身不定义边框，伪元素定义1px边框，并且根据根据像素比值设置缩放比例，像素比为 ...

一、问题　　 　 写H5的样式时候，设置元素的边框为1px,不幸的事情在IOS设备上发生了，设计师会说，咦，边框怎么那么大，这是2px了吧？改成1px。我明明设置成1px了啊。 二、为什么边框变粗了？ 　　IOS使用的是retina屏，因为Retine屏的分辨率始终是普通屏幕的2倍 ...

移动端1px解决方案 设备像素比? window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 -webkit-min-device-pixel-ratio的常见值对照 ...

//h5有个小bug 1像素边框过粗，其实有个解决方案，就是利用伪元素：after，结合css3中的scale在y轴方向缩放0.5就行了 //父元素 //完美解决h5下 1px 边框过粗的问题，是不是很简单呀。 //当然，有时候也会遇到按钮边框使用border-radius ...

前言 关于什么是移动端1像素边框问题，先上两张图，大家就明白了。 解决方案 将以下代码放在border.css文件中，然后引入 border.css【注意】 代码： . ...

1、边框粗细原因 在移动端下设置border为1px，在某些设备上看比1px粗。 这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 devicePixelRatio的官方 ...

解决移动端1px边框问题的几种方法 本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px ...