(原)移動端的 .5 像素

更新於20170623

 

前言

最近在寫一個移動項目，而後我本身發現了糾結了很久的關於border-width 的問題。起初我跟大部分前端同樣認爲，0.5 的 border-width 瀏覽器不支持。

而後我還發現 css: border-width= 1px 時，不一樣的手機顯示出來的遠遠不止 1px ，有時候甚至有 2px ~ 3px。

偶爾有一天看到 白樹的博客，才恍然大悟，讓我更加劇視了有疑慮疑惑立刻查閱的習慣。

因此，如下，整理了白樹的博客，寫成了方便我本身之後使用和閱讀的博客。

 

一、web移動項目中，在retina顯示屏下網頁會由1px 會被渲染成 2px 甚至 3px（例如 iphone 6 plus）。因此視覺設計稿中 1px 的border-width 還原成網頁須要寫成 .5px。

 

二、其實在PC端 .5px 是能夠被支持的，只須要把瀏覽器分辨率放大到 200% ，便可看到。因此，css: border-width =1 px 是能夠被支持的。只是：

　　2-1： ios8+ 和 winphone 對高清屏作了特殊處理，因此能看到 .5px 。

　　2-1： android 幾乎全部機型都不支持 .5px 邊框（可是我最近測試 MI 6 android 7.0能夠顯示）

 

三、借用白樹的測試圖表

 

 

四、使用方法：

.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;
}

 

以上。