由于分辨率的差异，高清手机屏上的 1px实际上是由 2×2 个像素点来渲染，有的屏幕如iPhone6s plus甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框甚至3px的边框 虽然用户在实际使用的时候，很难发现这 1px 的差异，但是设计师往往会 ...

对于不同的移动设备，其物理像素与逻辑像素间存在不同的比例关系。所以我们仅仅在CSS中为border设置1px时，在手机上看起来会显得比较粗，达不到预期效果。 关于物理像素与逻辑像素 物理像素 移动设备出厂时，不同设备自带的不同像素，也称硬件像素； 逻辑像素 即css中记录的像素 ...

...

自从乔帮主提出retina屏以来。可练就了不少前端兄弟的像素眼，有强迫症的伙伴们日子可就煎熬了。为了画出真正的1像素边框，前端猿们也是受尽各浏览器的虐待了。 关于什么是移动端1像素边框问题，先上两张图，大家就明白了。 图1 图2 实现1PX边框的方法有很多，各有优缺点 ...

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

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

一.思路 普通的1px黑色实线边框： 半像素边框当然不是简单地把1px改为0.5px（没测试过，可能会被解析成1或者0），border-width的值只能是自然数 类似的，outline, box-shadow等等也没有办法画出0.5px的细线 常规思路是不可行 ...

公司的设计师在做设计图的时候都是以iphone6（宽为750物理像素）为基准进行设计的。iphone6的设备像素比（即css像素与物理像素的比例）是2，所以设计师在设计图画了边框为1px的box的时候，相对于css代码来说就是0.5像素。 对于这个问题，最直观的方法就是css直接 ...