扣丁学堂HTML5培训详解移动端HTML5页面中1px边框的几种解决方法

时间 2019-12-08

标签学堂 html5 html 培训详解移动页面 1px 边框几种解决方法栏目 HTML5 繁體版

原文原文链接

本篇文章扣丁学堂HTML5培训小编给读者们分享一下移动端HTML5页面中1px边框的几种解决方法，对此感兴趣的小伙伴就随小编来了解一下吧。css

问题提出：html

这是一个比较老的问题了，先来看一下情形：web

设计师拿着手机过来：这些边框都粗了啊，个人设计稿上是1px的。微信

我：????我写的是1px呀，不信你看。(说着拿出了css代码)学习

设计师：不对啊我眼睛看这个边框比我设计稿上粗不少，看起来好奇怪。scala

我：那我把它改为0.5px你看看(边说边改了代码)设计

设计师一看，点点头，果真好不少。code

后来发现一样的代码在某些安卓机上是有问题的，会致使0.5px的线看不见。orm

奇了怪了，显然改为0.5px不能解决问题，可是确实1px边框看上去比设计稿上要粗不少，缘由何在?视频

1px边框的表现：

咱们直接使用css去定1px的边框。

html:

</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>

<head>

<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>

细线

</ul>

</body>

</html>

解决方法二：rem + viewport

说到这里，解决方法就很明了了：咱们能够在运行的时候拿到设备的devicePixelRatio，动态改变viewport的initial-scale为 1/devicePixelRatio，这样就能保证1px的宽度就是真正的1物理像素宽。其余适配使用rem（由于使用px的话都会被缩小）

代码以下：

<!DOCTYPE html>

<head>

<title>移动端1px边框问题</title>

(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>

</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从入门到精通开发实战技能。