(原)移动端的 .5 像素

更新于20170623

 

前言

最近在写一个移动项目，然后我自己发现了纠结了好久的关于border-width 的问题。起初我跟大部分前端一样认为，0.5 的 border-width 浏览器不支持。

然后我还发现 css: border-width= 1px 时，不同的手机显示出来的远远不止 1px ，有时候甚至有 2px ~ 3px。

偶尔有一天看到 白树的博客，才恍然大悟，让我更加重视了有疑虑疑惑马上查阅的习惯。

所以，以下，整理了白树的博客，写成了方便我自己以后使用和阅读的博客。

 

1、web移动项目中，在retina显示屏下网页会由1px 会被渲染成 2px 甚至 3px（例如 iphone 6 plus）。所以视觉设计稿中 1px 的border-width 还原成网页需要写成 .5px。

 

2、其实在PC端 .5px 是可以被支持的，只需要把浏览器分辨率放大到 200% ，即可看到。所以，css: border-width =1 px 是可以被支持的。只是：

　　2-1： ios8+ 和 winphone 对高清屏做了特殊处理，所以能看到 .5px 。

　　2-1： android 几乎所有机型都不支持 .5px 边框（但是我最近测试 MI 6 android 7.0可以显示）

 

3、借用白树的测试图表

 

 

4、使用方法：

.btn {
    position: relative;
    width: 200px;
    height: 42px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 42px;
    background-color: #EDEDED;
}
.btn:before {
    content: '';
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-style: solid;
    border-width: 1px;
    border-color: red;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

 

以上。