移动端1px解决方法

放肆的年华 提交于 2020-03-05 16:36:42

方法一. ::after或者::before + transform

在移动端web开发中,设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问题。
我们通常在css中设置的width:1px,对应的便是物理像素中的2px。

		div {
            position: relative;
            height: 100px;
            width: 100px;
            background-color: pink;
            /* border: 1px solid red; */
        }

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

当没处理的时候:
在这里插入图片描述
处理之后:
在这里插入图片描述

方法二.viewport和rem结合

默认浏览器以1rem=16px来换算。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    // width    设置viewport宽度,为一个正整数,或字符串‘device-width’
    // device-width  设备宽度
    // height   设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
    // initial-scale    默认缩放比例(初始缩放比例),为一个数字,可以带小数
    // minimum-scale    允许用户最小缩放比例,为一个数字,可以带小数
    // maximum-scale    允许用户最大缩放比例,为一个数字,可以带小数
    // user-scalable    是否允许手动缩放
    <meta name="viewport"
        content="width=device-width, initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
 div {
            position: relative;
            width: 18.75rem;
            height: 18.75rem;
            background-color: pink;
            border: .0625rem solid red;
        }

方法三.小数值

 <script type="text/javascript">
        if (window.devicePixelRatio && devicePixelRatio >= 2) {
            var main = document.querySelector('.main');
            main.style.border = '.5px solid red';
        }
    </script>

兼容性差。

方法四.css3中box-shadow

		div {
            height: 300px;
            width: 300px;
            background-color: rosybrown;
            -webkit-box-shadow: 0 1px 1px -1px rgba(255, 0, 0, 0.5);
            box-shadow: 0 1px 1px -1px rgba(131, 22, 22, 0.5);
        }

边框我是有些看不出来,感觉费劲巴拉 哈哈
个人觉得前两个方法都OK(有不对望指出,有别的方法望留言补充哈)

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!