移动端1px边框问题
2019-03-10 本文已影响0人
D_R_M
解决方案一
- 使用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>
