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

移动项目开发中，安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示，网上搜了一下，解决方法如下： 一、利用css中的transform的缩放属性解决，推荐这个。如下面代码。 这个主要利用after伪类进行缩放。调用公共class，还是很方便 ...

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

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

引入下面这段css ...

一直不太清楚CSS中的1px与逻辑像素、物理像素是个什么关系（作为一名前端感觉很惭愧 -_-！），今天终于花时间彻底弄清楚了，其实弄清楚之后就觉得事情很简单，但也只有在弄清楚之后，才会觉得简单（语出《禅与摩托车维修艺术》，哈哈哈哈）。 两种像素 物理像素：设备屏幕实际拥有的像素点 ...

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

参考： https://blog.csdn.net/Tyro_java/article/details/52013531 效果： 方法：利用 伪元素 + 缩放 注：我的页面 ...