解决1px的border在移动端变粗的问题

实现1px像素需要知道min-device-pixel-ratio设备像素比。如不清除的情移步了解下张鑫旭大神的设备像素比devicePixelRatio简单介绍 @media (-webkit-device-pixel-ratio: 1.5),(device-pixel-ratio: 1.5) { .border-1px{ &:after{ ...

border设置1px看起来很粗问题 在解决这个问题之前我们需要先理解一下‘设备像素比’这个概念 描述：设备像素比（devicePixelRatio） 公式：设备像素比 ＝ 物理像素 / 设备独立像素 （注：在某一方向上） 问题本质：css中设置的像素并不是跟设备的像素点一一对应，这就是说，在css中写明1px，实际在手机上，看到的有可能并不是一个像素点占据的宽度。 css的像素是一个抽...

移动端1px像素线变粗的原因 在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式还是不如人意，虽然表面上看起来和设计稿是一样的，可是就是没设计稿那种感觉，而且莫名还有一种山寨的气息，UI审查的时候也常常会觉得分割线或则边框线太粗了，要更细一点，但是一看代码，已经是1px了，为什么看着还是那么粗呢？ 要知道问题的原因首先要了解一下几个概念： (1)物理像素(physical pixel) 一个物理像素是显示器（手机屏幕）上最小的物理显示单元（像素颗粒），在操作

在高清屏下，移动端的1px边框会显得较粗，这是因为CSS中的1px并不等同于移动设备上的1px。不同手机的像素密度不同，导致了这一问题。例如，在Retina屏幕（设备像素比为2）上，设置的1px CSS像素实际上会用2个物理像素单元来渲染，因此看起来会比1px粗一些。：直接在CSS中设置0.5px的边框宽度。这种方法适用于支持0.5px边框的设备。例如，可以通过JavaScript检测浏览器是否能处理0.5px的边框，如果可以，则给html标签元素添加一个class来应用0.5px的边框。

css中的1px并不等于移动设备的1px，这是由不同手机由不同像素密度，在window对象中有一个devicePixelRatio属性，他可以反应css中像素与设备的像素比。对于老项目，这种方案比较完美, 原理是把原来的所有边框去掉，通过伪类崇左border,并且transform的scale缩小一半，原先的单挑border样式设置。devicePixelRatio 的官方给的定义为： 设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。

作者 | 李兴瑞1px线变粗的原因在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式还是不如人意，虽然表面上看起来和设计稿是一样...

问题描述 设计最近找我说，文字的边框很粗，和设计稿不匹配，当时由于项目紧，没有特别注意这个细节，现在让我在这个版本迭代修改了。 原因 首先我么要先找到原因，因为css中的1px不等于移动设备的1px，由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 devicePixelRatio的官方的定义为：设备物...

兜兜转转又开始做移动端啦~相对于实习生时做的移动端功能，难上许多。 今天忽然就有一个想法：上家公司我学到了很多pc端的知识，这家公司我可以学习更多的移动端知识。除此之外，更要精进对Js的掌握啦。 -----------上解决方案---------- 问题：1px的线框在移动端上看起来比较粗。 解决办法1（本人常用）： 解析： 原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的

对于前端开发者来说，要处理这个问题，必须先补充一个知识点，就是设备的 物理像素[设备像素] & 逻辑像素[CSS像素]；在我的另外一片文章 设计稿的100%还原 做了介绍，感兴趣的朋友可以查阅一下。 # 为什么1px变粗了？ 为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，UI设计师要求的1p...

移动端1px问题解决方案 高清屏中1px线问题 在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题。 为什么高清屏下1px更宽 高清屏（retina屏）是指高dpr的设备，其物理像素的密度更大。又分为有两倍屏，三倍屏。 dpr:物理像素/css像素 在普通屏，1个css像素对应1个物理像素；2...

产生原因     因为Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了 解决之道     1.在ios8+中当devicePixelRatio=2的时候使用0.5px div{ border:1px solid #000; } @media (-

（给前端大全加星标，提升前端技能）作者：大转转FE/李兴瑞1px线变粗的原因在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式...

前言 我们使用手机App的WebView和浏览器查看网页时，经常能看见那细如发丝的“0.5px”的边框、线条，让整个页面效果看起来更加细致。这里所谓的“0.5px”是如何实现的呢，web页面中最小的单位是1px,“0.5px”已经脱离了web定义的单位标准，如果直接使用“0.5px”那么它其实是以1px像素呈现。我在这里说下所谓的移动端“0.5px”像素实现方法，如果小弟理解的有什么错误，欢迎各位大

通过transform将宽度缩小一半，transform:scaleY(0.5) 通过伪类实现 <div class="thin-bottom-border">aaaaaa</div> .thin-bottom-border{ position: relative; } // 底边 .thin-bottom-border:before { content: ...