移动端1像素边框如何实现,css 1px边框

　　问题提出

　　这是一个比较老的问题。第一次注意到的时候，是UI设计师找我麻烦。emmm当时刚接触前端职场，什么都不懂。情况如下：

　　设计师拿着手机走过来：这些边框很粗。我的设计稿是1px。

　　我：我写了1px。如果你不相信我，看看。(说着拿出了css代码。

　　设计师：没有，我的眼睛看起来这个边框比我的设计稿粗很多。看起来好奇怪(emmm真的有像素眼。

　　我：那我改成0.5px看看吧(我边说边改代码

　　设计师看了一下，点了点头，好多了。

　　后来发现同样的代码在一些安卓机上是有问题的，会导致0.5px的线看不到。

　　奇怪，明明改成0.5px也解决不了问题，但是1px边框看起来比设计稿粗很多是真的。为什么？

　　1px边框的表现

　　我直接用css设置1px边框，

　　html:

　　ul class=发际线 li1/li li2/li/ulcss:

　　* {边距：0；填充：0；} ul，李{ list-style:无；} .发际线{宽度：300px边距：100px自动；} .发际线李{位置：相对；页边距-顶部：10pxborder-bottom:1px solid # cccccc；//将边框设置为1px}得到的截图如下：

　　看起来比设计稿厚多了。设计草稿应该如下所示。你可以比较一下：

　　解决方法一：伪类+transform

　　抱着解决问题的心态，虽然当时没搞清楚原因，但还是找到了相关的解决办法。其中有人提到使用border-image或box-shadow也可以模拟出想要的1px边框效果，但我个人认为这不是通用的或常规的解决方案。

　　最后的选择是使用伪变换法：原理是去掉原元素的边框，然后用：before或：after重做边框，将变换的尺度缩小一半。原元素相对定位，新做的边框绝对定位。

　　Html同上

　　Css如下：

　　* {边距：0；填充：0；} ul，李{ list-style:无；} .发际线{宽度：300px边距：100px自动；} .发际线李{位置：相对；边框：无；页边距-顶部：10px} .发际线李：后{内容： ；位置：绝对；左：0；底部：0；背景：# cccccc宽度：100%；高度：1px-WebKit-transform:scaleY(0.5)；变换：scaleY(0.5)；-WebKit-transform-origin:0 0；转换原点：0 0；}这种情况下，画出来的线真的细很多。我一般用上面的方法解决一年后的1px边框问题，但是用了之后发现了几个问题：

　　1.为什么是scaleY(0.5)？这个0.5是怎么来的？是不是所有的模型都要求缩小一半，换句话说，是不是通用的？

　　2.如果我想同时画一个容器的四个边框怎么办？

　　3.你支持圆形边框吗？

　　最后两个问题可以通过修改上面的代码来解决(为了方便查看效果，我把平时编写得到的效果和使用伪类得到的效果放在一起，这样更容易看出区别):

　　！DOCTYPE html html lang= en head meta charset= UTF-8 meta name= viewport content= initial-scale=1，maximum-scale=1，minimum-scale=1，user-scalable=no，Width=device-width title 1px移动终端的边框问题/title style * { margin:0；填充：0；} ul，李{ list-style:无；} .线条{宽度：200像素；边距：0自动；} .线条Li { border:1px solid # cccccc；高度：50px行高：50px文本对齐：居中；边框半径：13px页边距-顶部：10px} .发际线{宽度：200px边距：0自动；边框半径：3px} .发际线李{身高：50px行高：50px边框：无；文本对齐：居中；位置：相对；页边距-顶部：10px} .发际线李：后{内容： ；位置：绝对；左：0；top:0；边框：1px实心# cccccc边框半径：26px宽度：200%；身高：200%；-WebKit-transform:scale(0.5)；变换：缩放(0.5)；-webkit-transform-origin:左上；变换-原点：左上；} /style/headbody粗线ul class=lines li1/li li2/li/ul细线ul class=发际线 li3/li li4/li/ul/body/html生成的效果图如下：

　　下面的边框明显细了很多，更接近设计稿。

　　所以“1。为什么是scaleY(0.5)？这个0.5是怎么来的？是不是所有的模型都要求缩小一半，换句话说，是不是通用的？”这个问题怎么回答？

　　这又回到了问题的本质。为什么我明明用css写了1px，还是有“看起来比平时粗很多的效果”？

　　检查数据后发现，css中设置的像素与设备的像素并不是一一对应的。也就是说我用css写了1px。其实我在手机上看到的可能不是一个像素所占的宽度。

　　css的像素是一个抽象而相对的概念。在不同的设备和环境下，表现的物理像素是不同的。在旧设备上，屏幕每英寸的像素相对较低。这样看来，1px像素是物理像素是真的。但是随着技术的飞速发展，现在的手机屏幕都是高分辨率的，在尺寸不变的情况下，一个屏幕会被更多的像素填满。这时，一个css像素(通常称为逻辑像素)

　　一个css的像素宽度对应多少物理像素？

　　这是指devicePixelRatio(设备像素比率)

　　DevicePixelRatio=设备上的物理像素/独立像素，可以通过window.devicePixelRatio获得，这个像素比正好可以描述一个css的像素宽度对应多少物理像素，实际对应的是devicepixelrratio像素。

　　当viewport的属性初始比例为1时，页面大小正常，但当初始比例为0.5时，页面缩小一倍。devicePixelRatio为2的器件，原本CSS像素宽度占两个物理像素，缩小后的CSS像素宽度只占一个物理像素，也就是实现了真正的1个物理像素。

　　解决方法二：rem + viewport

　　至此，解决方案已经很明确了：我们可以在运行时获取设备的DevicePixelRadio，将viewport的initial-scale动态更改为1/DevicePixelRadio，从而保证1px的宽度是1个物理像素的真实宽度。其他适应使用rem(因为px会减少)

　　代码如下：

　　！文档类型html html lang= en head meta charset= UTF-8 ！-meta name= viewport content= initial-scale=1，maximum-scale=1，minimum-scale=1，user-scalable=no，width=device-width - title移动端1px边框问题/title script(function(){ var client width=window。屏幕。宽度；var DPR=窗口。devicepixelrratiovar VP=文档。createelement(“meta”)；文档。文档元素。风格。字体大小=客户端宽度414？ 20px :20 * DPR *客户端宽度/360 px ；vp.name= viewportVP。content=` initial-scale=$ { 1.0 * 1/DPR }，maximum-scale=${1.0 * 1/dpr}，minimum-scale=${1.0 * 1/dpr}，user-scalable=no，width=device-width `；var m=文档。getelementsbytagname( meta )[0]；m.parentNode.insertBefore(vp，m)；})();/script style * { margin:0；填充：0;} ul，李{列表样式：无；} .线条{宽度：10雷姆；边距：0自动；} .线条李{ border:1px solid # cccccc；身高：2.5雷姆；行高：2.5雷姆；文本对齐：居中；边界半径：0.6雷姆；边距-顶部：0.5雷姆；}/style/head body ul class= lines li1/Li li2/Li/ul/body/html得到的效果可以看下图（手机上看更明显一些):

　　从上来看，回到之前的问题，1.为什么是scaleY(0.5)？这个0.5是怎么得出的？是不是所有机型都是要规模缩小到一半，换句话说是不是通用？其实并不一定是0.5,在项目文件为3的设备上其实应该是0.3333……,也不通用，因为每个手机的项目文件可能不一样，但是方法一中的0.5一般因为至少比1px细，所以也差不多可以满足设计师的要求了。

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。