在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 '在.tab的div中,新增border-1px-bottom類名即可./assets/stylus/mixin.stylus
'
class="tab如果要清除邊框,在樣式中呼叫該函式border-1px-bottom
">
.info-itempadding: 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...