扣丁学堂HTML5培训详解移动端HTML5页面中1px边框的几种解决方法
本篇文章扣丁学堂HTML5培训小编给读者们分享一下移动端HTML5页面中1px边框的几种解决方法，对此感兴趣的小伙伴就随小编来了解一下吧。
问题提出：
这是一个比较老的问题了，先来看一下情形：
设计师拿着手机过来：这些边框都粗了啊，我的设计稿上是1px的。
我：????我写的是1px呀，不信你看。(说着拿出了css代码)
设计师：不对啊我眼睛看这个边框比我设计稿上粗很多，看起来好奇怪。
我：那我把它改成0.5px你看看(边说边改了代码)
设计师一看，点点头，果然好很多。
后来发现同样的代码在某些安卓机上是有问题的，会导致0.5px的线看不见。
奇了怪了，显然改成0.5px不能解决问题，但是确实1px边框看上去比设计稿上要粗很多，原因何在?
1px边框的表现：
我们直接使用css去定1px的边框。
html:
<ul class="hairlines"> <li>1</li> <li>2</li> </ul>
css:
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
margin-top: 10px;
border-bottom: 1px solid #cccccc; // 边框设置成1px
}解决方法一：伪类+transform
抱着解决问题的心理，虽然当时也没有想清楚原因在哪，但是还是找到了相关的解决方法，其中一些方法中提到使用边框图片border-image或者box-shadow，也可以模拟出想要的1px边框效果，但是我个人觉得不通用，也不是常规解决方法。
最终选择的是使用伪类+transform方法：原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
html同上
css如下：
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
border:none;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}这样的话，画出的线确实细很多，我在之后长达一年的时间里面一般都是使用上面的方法去解决1px边框的问题，但用着用着，我们发现了几个问题：
1.为什么是scaleY(0.5)？这个0.5是怎么得出的？是不是所有机型都是要scale缩小到一半，换句话说是不是通用？
2.如果我要同时画一个容器的四个边框怎么办？
3.支不支持圆角边框？
后两个问题改造一下上面的代码，可以找到解决方法(为了方便查看效果，我把平时写法得出的效果和使用伪类得出的效果放一起，这样更容易看出差别)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
<title>移动端1px边框问题</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.lines {
width: 200px;
margin: 0 auto;
}
.lines li {
border: 1px solid #cccccc;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 13px;
margin-top: 10px;
}
.hairlines {
width: 200px;
margin: 0 auto;
border-radius: 3px;
}
.hairlines li{
height: 50px;
line-height: 50px;
border:none;
text-align: center;
position: relative;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
top: 0;
border: 1px solid #cccccc;
border-radius: 26px;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
</style>
</head>
<body>
粗线
<ul class="lines">
<li>1</li>
<li>2</li>
</ul>
细线
<ul class="hairlines">
<li>3</li>
<li>4</li>
</ul>
</body>
</html>解决方法二：rem + viewport
说到这里，解决方法就很明了了：我们可以在运行的时候拿到设备的devicePixelRatio，动态改变viewport的initial-scale为 1/devicePixelRatio，这样就能保证1px的宽度就是真正的1物理像素宽。其他适配使用rem（因为使用px的话都会被缩小）
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">-->
<title>移动端1px边框问题</title>
<script>
(function () {
var clientWidth = window.screen.width;
var dpr = window.devicePixelRatio;
var vp = document.createElement('meta');
document.documentElement.style.fontSize = clientWidth > 414 ? '20px' : 20 * dpr * clientWidth / 360 + 'px';
vp.name = 'viewport';
vp.content = `initial-scale=${1.0 * 1 / dpr}, maximum-scale=${1.0 * 1 / dpr}, minimum-scale=${1.0 * 1 / dpr}, user-scalable=no, width=device-width`;
var m = document.getElementsByTagName('meta')[0];
m.parentNode.insertBefore(vp, m);
})();
</script>
<style>
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.lines {
width: 10rem;
margin: 0 auto;
}
.lines li {
border: 1px solid #cccccc;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
border-radius: 0.6rem;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<ul class="lines">
<li>1</li>
<li>2</li>
</ul>
</body>
</html>从上来看，回到之前的问题，"1.为什么是scaleY(0.5)?这个0.5是怎么得出的?是不是所有机型都是要scale缩小到一半，换句话说是不是通用?"其实并不一定是0.5,在dpr为3的设备上其实应该是0.3333……，也不通用，因为每个手机的dpr可能不一样，但是方法一中的0.5一般因为至少比1px细，所以也差不多可以满足设计师的要求了。
想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。
H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】
注：点击(了解更多)进入课程直播间
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...