【移動應(yīng)用開發(fā)技術(shù)】移動端開發(fā)1px線的示例分析

【移動應(yīng)用開發(fā)技術(shù)】移動端開發(fā)1px線的示例分析

1px線變粗的原因(1)物理像素(physicalpixel)(2)設(shè)備獨立像素(density-independentpixel)(3)設(shè)備像素比(devicepixelratio)簡稱dpr/upload/information/20210311/298/5826.jpg<meta

name="viewport"

content="width=device-width,

initial-scale=1.0,

maximum-scale=1.0,

user-scalable=no">1px線變粗的解決方法偽類+scale.scale{

position:

relative;

border:none;

}

.scale:after{

content:

'';

position:

absolute;

bottom:

0;

background:

#000;

width:

100%;

height:

1px;

-webkit-transform:

scaleY(0.5);

transform:

scaleY(0.5);

-webkit-transform-origin:

0

0;

transform-origin:

0

0;

}使用flexible.js//devicePixelRatio=2時，輸出meta如下

<meta

name="viewport"

content="initial-scale=0.5,

maximum-scale=0.5,

minimum-scale=0.5,

user-scalable=no">

//devicePixelRatio=3時，輸出meta如下

<meta

name="viewport"

content="initial-scale=0.3333333333333333,

maximum-scale=0.3333333333333333,

minimum-scale=0.3333333333333333,

user-scalable=no">使用metaviewport控制//1px像素線條

<meta

name="viewport"

content="width=device-width,initial-scale=1.0,user-scalable=0">

//0.5像素線條

<meta

name="viewport"

content="width=device-width,initial-scale=0.5,user-scalable=0">使用box-shadow模擬邊框.box-shadow-1px

{

box-shadow:

inset

0px

-1px

1px

-1px

#c8c7cc;

}使用border-imagep{

border-width:

0

0

1px

0;

border-image:

imageUrl

2

0

round;

}利用背景漸變linear-gradient.bg_border

{

background-image:

linear-gradient(0deg,black

50%,transparent

5