如何在视网膜显示屏上绘制一条真正像素宽的移动野生动物园线?
我试过了:
border-bottom:0.5px solid #fff;
和
border-bottom:0.05em solid #fff;
在0.01em和0.1em之间具有不同的值。
Mobile Safari始终绘制一条像素宽的线(视网膜显示屏上的2个像素)或根本不绘制线条。如何让移动safari绘制一条真实像素(0.5px)宽的线?
答案 0 :(得分:3)
使用比例。下面的风格将为您提供发线
.transform-border-hairline {
border-bottom: 1px #ff0000 solid;
transform: scaleY(0.5);
}
更具体地说(以及现场使用中的技巧)http://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/
答案 1 :(得分:1)
我通常建议不要使用.5像素。但是你想要回退它。
只需将后备放在首位。像这样。
border-bottom: 1px solid #fff;
border-bottom: 0.5px solid #fff;
答案 2 :(得分:1)
border-width: 0.5px
Safari 8(iOS和OS X)带来border-width: 0.5px
。你可以使用它,如果你已经准备好接受当前版本的Android和旧版本的iOS和OS X将只显示一个常规边界(在我看来是一个公平的妥协)。
您无法直接使用此功能,因为不了解0.5px
边框的浏览器会将其解释为0px
。无边界。因此,您需要做的是在支持时为<html>
元素添加一个类:
if (window.devicePixelRatio && devicePixelRatio >= 2) {
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);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() { })
然后,使用视网膜细线变得非常容易:
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
最重要的是,你可以使用border-radius。您可以轻松地将它与4个边框(顶部/右侧/底部/左侧)一起使用。