阅读 2530

面试官:画一个边框宽度为0.5px的正方形叭。

我们知道在写移动端页面时,有个经典的1px问题。该问题的原因是:在pc端的设计稿拿到移动端会产生视觉上的放大,解决该问题的方案就是将1px缩小为0.5px。

解决方法

1.直接写0.5px,不兼容。
2.transform的scale。
3.linear-gradient,渐变。
4.SVG。
5.box-shadow。
6.meta中的viewport。

实现

在上述方案中效果最好,最常用的是transform的缩放,接下来我们就看看是怎么实现的叭。

     
        .box1 {
            background: none;
            margin-top: 10px;
            margin-left: 200px;
            height: 100px;
            width: 100px;
            border: 0.5px solid #000;
        }

        .box2 {
            position: relative;
            margin: 10px 0 0 200px;
            border: none;
            background: none;
            height: 100px;
            width: 100px;
        }

        .box2::after {
            content: '';
            position: absolute;
            border: 1px solid #000;
            top: 0;
            left: 0;
            box-sizing: border-box;
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            transform-origin: left top;
        }

    <div class="box"></div>
    <div class="box1"></div>
    <div class='box2'></div>
复制代码

使用伪元素给box2添加边框。注意这里要添加transform-origin: left top;不然盒子会偏移中心。

image.png
这是在pc端的效果,是不是感觉直接设置为0.5px,反而会更细呢。但是我们再看看移动端的情况。

image.png
在移动端只有缩放0.5的方案才符合效果。


记录记录!

文章分类
前端
文章标签