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

2022-06-07 08:54:10 字數 4131 閱讀 5743

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