像数
为影像显示的基本单位。 https://www.wikiwand.com/zh-sg/%E5%83%8F%E7%B4%A0
CSS像素(CSS pixels)
浏览器使用的抽象单位，用来精确度量网页上的内容。 eg：平时经常写的width:100px;height:100px; 都是与设备无关的。
设备独立像素 (device - independent-pixels)
也可以称为设备无关的逻辑像素
meta里面设置width=device-width，这个device-width就是设备独立像素 。
CSS 的多种单位
参考
- https://www.paintcodeapp.com/news/iphone-6-screens-demystified
- https://www.zhihu.com/question/32011095
- http://screensiz.es/
0.5px 的问题
首先自己确实对移动端不熟啊，很多东西都没有认真研究过。那么下面说下 0.5px 的问题吧，网上文章太多，质量良莠不齐。其实 0.5px 这个问题准确来说是讲得 1px 的问题。
在熟悉了上面说的 设备像素和设备独立像素后 来理解这个 1px 的问题就迎刃而解了。那么这个问题到底说的是什么呢？
乔布斯提出了 视网膜屏 这个概念，其实算是个营销术语吧。其实对于 ppi 高于 300 的屏幕都可以说成是视网膜屏。就目前大多数手机而言， ppi 都很高， DPR 都是 >2 的。 那么就变成了多个物理像素来显示一个逻辑像素。这就是大家说的 1px 变成了 2px 的问题。其实这里有个错误，应该是 1像素 成了 2像素， 因为这个指的是 物理像素。而逻辑像素上 1px 就是 1px ，并没有变大。
那么我们现在需要 1个物理像素的border， 并且需要考虑圆角。
rem + viewport
// 美团为例： http://i.meituan.com/
// 正常情况：
<meta name="viewport" content="initial-scale=1, user-scalable=no">
html {
font-size: 50px;
}
// 高 DPR：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
html {
font-size: 100px;
}
baidu google 都是 initial-scale=1 , 即使是大网站，都有不同的设置和理解。
这个方法，也是目前我觉得最好的，没有明显的兼容性问题，完全不用考虑圆角等，而使用其他 hack 手段。
Box-shadow
效果还不错
<div class="example--box-shadow"></div>
<div class="example--box-shadow-round"></div>
<div class="example--box-shadow-2"></div>
.example--box-shadow {
box-shadow: 0 0.5px 0 #000;
}
.example--box-shadow-2 {
box-shadow: 0 0.1px 0 #000;
}
.example--box-shadow-round {
width: 200px;
height: 100px;
margin-left: 100px;
border-radius: 10px;
box-shadow: 0 0 0 0.5px #000;
}
iOS8 +
JS判断UA，是否是ios8+，是的话则输出类名hairlines，为了防止重绘，这段代码加在head里即可。
if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
version = parseInt(v[1], 10);
if(version >= 8){
document.documentElement.classList.add('hairlines')
}
}
是否支持0.5px边框
JS判断是否支持0.5px边框，是的话，则输出类名hairlines。
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);
}
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
radio 的媒体查询
这个用于图片等一些处理还不错，毕竟 0.5 不是谁都有的（2333）
.css{
background-image: url(img_1x.png); // 普通显示屏(设备像素比例小于等于1.3)使用1倍的图
border: 1px;
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{
background-image: url(img_2x.png); // 高清显示屏(设备像素比例大于等于1.5)使用2倍图
border: 0.5px;
}
}
其余
这几个方法效果比较差，就不多说了。
- transform: scale(0.5)
- linear-gradient(to bottom, #000 0%, #000 51%, transparent 51%)
- 图片
参考：
网友评论