移動端1px產生原因及解決方案

在retina屏中，畫素比為2(iphone6/7/8)或3(iphone6plus/7plus/8plus)，1px的邊框看起來比真的1px更寬。

本文預設你已經對視口、物理畫素、邏輯畫素、裝置畫素比、css畫素等移動端基本概念已經解。

class="

tab border-1px-bottom
">
class="
tab-item
">
'/goods
'>商品
class="
tab-item
">
'/ratings
class="
tab-item
">
'/sellers
'>商家
class="
footer
">我是尾部
在vue專案中解決方式
我們在assets公共資源資料夾中新建stylus, 新建mixin.stylus,  利用偽類編寫1px的邊框， 並且對不同的裝置畫素比進行適配
//

偽類+transform
//原理：把原先元素的border去掉，然後利用:before或者:after重做border，並 transform的scale縮小一半，
//原先的元素相對定位，新做的border絕對定位。
$color =blue
.border-1px-bottom, .border-1px-top,.border-1px-left,.border-1px-right
position: relative
//邊框一畫素,利用偽類設定一畫素
.border-1px::after
content: "";
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 
100%;
height: 
100%;
border: 1px solid $color
//下邊框
.border-1px-bottom::after
position :absolute
left: 
0bottom: 
0width: 
100%border-
bottom: 1px solid $color
content: ''
//上邊框
.border-1px-top::before
position :absolute
left: 
0top: 
0width: 
100%border-top: 1px solid $color
content: ''
//左邊框
.border-1px-left::before
position :absolute
left: 
0top: 
0height: 
100%border-left: 1px solid $color
content: ''
//右邊框
.border-1px-right::after
position :absolute
right: 
0top: 
0height: 
100%border-right: 1px solid $color
content: ''
/*裝置畫素比
*//*
顯示屏最小dpr為1.5
*/@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5
) .border-1px-bottom::after,.border-1px-top::before
//y軸壓縮0.7, 1.5*0.7 約等於1
-webkit-transform: scaley(0.7
) transform: scaley(
0.7)
.border-1px-left::before,.border-1px-right::after
//x軸壓縮0.7, 1.5*0.7 約等於1
-webkit-transform: scalex(0.7
) transform: scalexx(
0.7)
.border-1px::after 
width: 
150%;
height: 
150%;
transform: scale(
0.7);
transform-origin: 00;
@media (
-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2
) .border-1px-bottom::after,.border-1px-top::before
//y軸壓縮0.5, 2*0.5 等於1
-webkit-transform: scaley(0.5
) transform: scaley(
0.5)
.border-1px-left::before,.border-1px-right::after
//x軸壓縮0.5, 2*0.5 等於1
-webkit-transform: scalex(0.5
) transform: scalex(
0.5)
.border-1px::after 
width: 
200%;
height: 
200%;
transform: scale(
0.5);
transform-origin: 00;
@media (
-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3
) .border-1px-bottom::after,.border-1px-top::before
-webkit-transform: scaley(0.333
) transform: scaley(
0.5)
.border-1px-left::before,.border-1px-right::after
-webkit-transform: scalex(0.333
) transform: scalex(
0.333
) .border-1px::after 
width: 
300%;
height: 
300%;
transform: scale(
0.333
); transform-origin: 0
0;
// 去除邊框   // 

border-none()
&:after
display: none
然後在vue元件中的樣式中引入

@import '

./assets/stylus/mixin.stylus
'
在.tab的div中，新增border-1px-bottom類名即可

class="tab

border-1px-bottom
">
如果要清除邊框，在樣式中呼叫該函式

.info-item

padding: 16px 12px
line-height: 16px
font-size: 12px
&:last-child
border
-none()
 
移動端 1px解決方案
var viewport document.queryselector meta name viewport var scale 1 window.devicepixelratio viewport.setattribute content width device width,initial sc...
移動端1px解決方案
lang en charset utf 8 name viewport content initial scale 1,maximum scale 1,minimum scale 1,user scalable no,width device width 移動端1px邊框問題title ul,li ...
移動端1px的解決方案
對於前端開發來說，如何完美的還原ui設計圖也是體現了開發功底的，設計師對於我們的要求也是越來越高。例如，如何實現移動端邊框1px？為什麼1px在不同的裝置下展示的粗細不一樣？說到這裡，我們不得不介紹一下dpr devicepixelratio 裝置畫素比,它是預設縮放為100 的螢幕下，裝置畫素和c...