移动端实现0.5px线条

2017-03-30

移动端写页面时候,由于手机屏幕小,为了让线条看起来更细腻,所以需要0.5px的线条

现在的浏览器越来越先进,最新的浏览器大部分都可以使用媒体查询来实现,例如

.border-div {
    border: 1px solid #333;
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .border-div {
        border: 0.5px solid #333;
    }
}

如果要针对整个页面使用.5px边框的话,可以用js来判断是否retina屏来使用特定的class

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  // retina屏
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1) {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}

上面代码效果,当在retina屏幕显示的时候会在html标签上添加一个hairlines的class,定义如下

div {
  border: 1px solid #bbb;
}
.hairlines div {
  border-width: 0.5px;
}

如果需要兼容旧版本的浏览器,可以用下面的几种方法

transform

原理很简单,就是利用伪类元素绘制1px的线条,然后利用transform:scale(0.5)缩放一半就变成了0.5px

<style type="text/css">
.line2 {
  position: relative;
  height: 1px;
}
.line2: after {
  position: absolute;
  content: '';
  width: 200 % ;
  height: 1px;
  transform - origin: 0 0;
  transform: scale(0.5);
  background: red;
}
</style>
<div class="line2"></div>

linear-gradien

原理是利用一半背景色,一半边框色来实现的,例如下面代码

<div style="height: 200px; width: 100px; background: linear-gradient(blue 50%, red 50%)"></div>

实现的效果

根据这个原理可以这样实现,第一个为背景色即可

.line1 {
  height: 1px;
  background: linear - gradient(#fff 50 % , red 50 % );
}

 

本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: css3

评论

Loading...

最新评论

相关推荐

css sticky失效原因调研
css sticky定义 position:sticky 定义元素为粘性定位元素,根据正常文档流进行定位,然后相对它的...
前端渲染优化-css资源加载
在日常网站开发中,我们会使用link来加载外部的css样式文件,然而css的加载会阻塞页面的渲染,直到资源加载完成并等待...
真机h5页面调试工具weinre
weinre是什么 weinre是网页远程审查工具,可以在pc端调试真机的浏览器页面,但是不能用来调试js wein...
scroll-top-icon