美文网首页
移动端1px边框问题

移动端1px边框问题

作者: D_R_M | 来源:发表于2019-03-10 18:20 被阅读0次

解决方案一

  • 使用rem为单位。
  • 使用js获取dpr值动态计算视口缩放,设置viewport content属性。
  • 计算得到缩放比后,应该对应给html的font-size 乘 回缩放比。
  • 边框使用px为单位,其余元素均使用rem单位,这样视口的缩放就只会影响到px单位。
  • 一劳永逸的解决方案
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框1px</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div style="margin-top:1rem;height:5rem;width: 5rem;border: 1rem #f00 solid;">div</div>
<script>
    var dpr = window.devicePixelRatio || 1;
    var viep = document.querySelector('meta[name=viewport]');
    var scal = 1 / dpr;
    document.documentElement.style.fontSize = (document.documentElement.offsetWidth/10)*dpr+'px';
    viep.setAttribute('content','width=device-width,initial-scale='+scal+',maximum-scale='+scal+',user-scalable=no');
</script>
</body>
</html>

解决方案二

  • 使用css3的媒体查询+transform的scale
  • 单线解决方案
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框1px</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
        #level{
            height: 1px;
            background: #f00;
        }
        @media only screen and (-webkit-device-pixel-ratio:2){
            #level{transform: scaleY(0.5);}
        }
        @media only screen and (-webkit-device-pixel-ratio:3){
            #level{transform: scaleY(0.333);}
        }
    </style>
</head>
<body>
    <div id="level"></div>
    <div style="height:100px;width: 100px;background: #ccc">div</div>
</body>
</html>

解决方案三(推荐方案非常灵活)

  • 使用css3的媒体查询+transform的scale
  • 多边框实现,目前较为常见的解决方案
  • 把需要使用到的边框全部提前定义好,使用时只需要写对应的class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框1px</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
        .box{
            width: 200px;
            height: 200px;
            background: #ccc;
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .border,.border-left,.border-right,.border-top,.border-bottom{
            position: relative;
            border:none;
        }
        .border:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #f00;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        .border-left:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border-left: 1px solid #f00;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        .border-right:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border-right: 1px solid #f00;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        .border-top:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border-top: 1px solid #f00;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        .border-bottom:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border-bottom: 1px solid #f00;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
        @media only screen and (-webkit-device-pixel-ratio:2){
            .border:after{
                width: 200%;
                height: 200%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-left:after{
                width: 200%;
                height: 200%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-right:after{
                width: 200%;
                height: 200%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-top:after{
                width: 200%;
                height: 200%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-bottom:after{
                width: 200%;
                height: 200%;
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
        }
        @media only screen and (-webkit-device-pixel-ratio:3){
            .border:after{
                width: 300%;
                height: 300%;
                -webkit-transform: scale(0.33333);
                transform: scale(0.33333);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-left:after{
                width: 300%;
                height: 300%;
                -webkit-transform: scale(0.33333);
                transform: scale(0.33333);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-right:after{
                width: 300%;
                height: 300%;
                -webkit-transform: scale(0.33333);
                transform: scale(0.33333);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-top:after{
                width: 300%;
                height: 300%;
                -webkit-transform: scale(0.33333);
                transform: scale(0.33333);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
            .border-bottom:after{
                width: 300%;
                height: 300%;
                -webkit-transform: scale(0.33333);
                transform: scale(0.33333);
                -webkit-transform-origin: left top;
                transform-origin: left top;
            }
        }
    </style>
</head>
<body>
    <div class="box border">div</div>
    <div class="box border-left">div</div>
    <div class="box border-right">div</div>
    <div class="box border-bottom">div</div>
    <!-- 单线 -->
    <div class="border-bottom" style="width:100%;height: 1px;"></div>
</body>
</html>

相关文章

  • 移动端适配及1px边框问题

    1、移动端适配 2、1px边框问题

  • 前端遇到的那些技术难点及性能优化之css篇

    移动端兼容 css篇 移动端的 1px 问题描述:1px 的边框。在高清屏下,移动端的 1px 会很粗。 产生原因...

  • 1px

    CSS中1px分割线处理移动web开发之像素和DPR详解7种方法解决移动端Retina屏幕1px边框问题IOS基础...

  • 移动端1像素边框问题

    移动端1像素边框问题: 设置一个div的底部边框为 1px solid #000; 实际表现却是边框线是模糊的,或...

  • 1px边框问题

    问题:ui设计稿中边框为1px,在实际的前端开发,移动端设备中会出现设置border:1px solid #000...

  • vue慕课网去哪儿实战项目笔记

    1.移动端解决1px边框问题,使用border.css;https://www.cnblogs.com/jy136...

  • web前端面试题

    1 移动端适配1px的问题 构建1个伪元素, 将它的长宽放大到2倍, 边框宽度设置为1px, 再以transfor...

  • 移动端1px边框问题

    造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像...

  • 移动端1px边框问题

    解决方案一 使用rem为单位。 使用js获取dpr值动态计算视口缩放,设置viewport content属性。 ...

  • 移动端1px边框问题

    自己开发出的边框粗于设计师给定的宽度吗?设计师验收通过不过吗?如果你也遇到看看解决办法吧。 解决方法一:伪类+tr...

网友评论

      本文标题:移动端1px边框问题

      本文链接:https://www.haomeiwen.com/subject/wskfjqtx.html