移动端 1px 的问题

痛定思痛。 2022-05-26 06:35 280阅读 0赞

pc端你写一个边框 1px ,那就是1px 没什么异常，移动端可能在这个机器上细一点，那个机器上粗一点，

这就产生了问题，原因主要是屏幕的类型造成的，原因这里不探讨，只看解决方案：

先看看下面这两种方案：

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8">

< meta name= "viewport" content= "width=device-width, initial-scale=1.0">

< meta http-equiv= "X-UA-Compatible" content= "ie=edge">

< title>Document</ title>

< style>

.test \{

*width*: 100 px;

*height*: 50 px;

*border*: 1 px solid \#000;

*margin*: 0 auto;

.a1 \{

*width*: 100 px;

*height*: 50 px;

*border*: 0.5 px solid \#000;

*margin*: 0 auto;

*margin-top*: 5 px;

.a2 \{

*width*: 100 px;

*height*: 50 px;

*border*: 1 px solid \#fff;

*border-bottom*: 1 px solid \#000;

*box-shadow*: 0 1 px 1 px \#fff;

*margin*: 0 auto;

*margin-top*: 5 px;

.a3 \{

*width*: 100 px;

*height*: 50 px;

*box-shadow*: inset 0 px \-1 px 1 px \-1 px \#000;

*margin*: 0 auto;

</ style>

</ head>

< body>

< div class= "test">常規設置1px像素</ div>

< div class= "a1">0.5px</ div>

< div class= "a2">box-shadow遮蓋</ div>

< div class= "a3">box-shadow凹陷</ div>

</ body>

</ html>

效果图：（iPhone 5s）

![70][]

首先    A是正常情况下设置 1px 的时候显示的样式；

其次    B是设置0.5px的情况下显示的样式；（不是所有的机型都支持0.5px 这里只是用来对比）

然后    C是使用box-shadow遮盖border 实现的样式，这个方法我在网上看到，不过实际看来

一点效果没有，应该是个错误的方法吧，不做深究，有知道的小伙伴可以教教我，不胜感激；

最后    D是利用凹陷实现的边框，宽度没有问题，相当好了，但是可以看出，相较于正常的0.5px的

显示颜色上淡了一些，这是个缺点；

上面的两种方法证明 利用凹陷实现1px 的边框是OK的，可以用的，仅此而已；下面再看看其它的方法：

这个方法是我在腾讯财经上看到的，来看看：效果图和代码部分

![70 1][]

![70 2][]

这个效果是利用transform:scale() 进行缩放产生 1px 的效果；

下面我们利用这个方法实现以下看看效果怎么样：

代码：

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8">

< meta name= "viewport" content= "width=device-width, initial-scale=1.0">

< meta http-equiv= "X-UA-Compatible" content= "ie=edge">

< title>Document</ title>

< style>

.test \{

*width*: 100 px;

*height*: 50 px;

*border*: 1 px solid \#000;

*margin*: 0 auto;

.a1 \{

*width*: 100 px;

*height*: 50 px;

*border*: 0.5 px solid \#000;

*margin*: 0 auto;

*margin-top*: 5 px;

.a2 \{

*width*: 100 px;

*height*: 50 px;

*border*: 1 px solid \#fff;

*border-bottom*: 1 px solid \#000;

*box-shadow*: 0 1 px 1 px \#fff;

*margin*: 0 auto;

*margin-top*: 5 px;

.a3 \{

*width*: 100 px;

*height*: 50 px;

*box-shadow*: inset 0 px \-1 px 1 px \-1 px \#000;

*margin*: 0 auto;

.a3::after\{

*position*: relative;

*top*: 40 px;

*content*: '';

*display*: block;

*background*: \#000;

*width*: 200 px;

*height*: 1 px;

*transform*: scaleY( 0.5)

</ style>

</ head>

< body>

< div class= "test">常規設置1px像素</ div>

< div class= "a1">0.5px</ div>

< div class= "a2">box-shadow遮蓋</ div>

< div class= "a3">box-shadow凹陷</ div>

< div class= "a4">利用transform:scale()</ div>

</ body>

</ html>

显示效果：

![70 3][]

可以看出这种方法也是OK的；

我们这里只是简单表现了一下一个1px 的线条如何实现，但是上面的线条位置并不是我想要的，或者说

我想实现的是div的四周边框1px 的线，下面再完整的实现一下：

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8">

< meta name= "viewport" content= "width=device-width,initial-scale=1,maximum-scale=1,

minimum-scale=1,user-scalable=no">

< title>Document</ title>

< style>

.test \{

*position*: relative;

*width*: 100 px;

*height*: 200 px;

.test::after \{

*content*: "";

*box-sizing*: border-box;

*position*: absolute;

*left*: 0;

*top*: 0;

*border*: 1 px solid \#000;

*width*: 200 %;

*height*: 200 %;

*transform*: scale( 0.5);

*transform-origin*: 0 0;

.abc \{

*width*: 100 px;

*height*: 200 px;

*border*: 1 px solid \#000;

</ style>

</ head>

< body>

< div class= "test">奥术大师多所多</ div>

< p class= "abc"></ p>

</ body>

</ html>

上面的效果：

![70 4][]

同上上面的例子我们可以看出，当我需要单独一条线的时候，那么就是相当于我创造了一个1px 的

线，然后贴在了我想要的地方，就和贴纸一样，位置是可以通过父级加相对定位，然后给线加绝对定位

来实现线的移动；

那么，四周1px的边框的实现就好理解了，你的div 还在那个地方没有变化，没有边框没有颜色，然后，

我们通过after伪类创造了一个边框1px的贴纸，这个贴纸和div的大小相同，然后把贴纸贴在div上面，

相当于覆盖了，视觉上看来就是div有了边框；

方法还有很多，暂时到这，后续继续补充；

[70]: /images/20220526/54d0c88e92a046e88fb60df8cf84bf39.png
[70 1]: /images/20220526/59eecbd7d5204779b5c1957044410ff3.png
[70 2]: /images/20220526/4e3ff15002fc4caeb0f59714e34bb696.png
[70 3]: /images/20220526/9cc2595298194fdd847a985b130fa962.png
[70 4]: /images/20220526/d0d10154469e41659494d190781ac2dc.png