移動(dòng)端1px實(shí)線

描述：因?yàn)橐苿?dòng)端設(shè)備分辨率高，所以H5中的1px到移動(dòng)端上后，變粗了；
解決方法：
1.通過(guò)媒體查詢(xún)判斷出移動(dòng)端設(shè)備
2.使用transform將1px實(shí)線縮放
此處使用的是stylus方案，如果項(xiàng)目中不支持stylus，則需要引入

創(chuàng)建三個(gè)文件 (在一個(gè)文件下)

1.base.styl 文件

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5).border-1px.border-all-1px&::after-webkit-transform: scaleY(0.3)transform: scaleY(0.3)@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2).border-1px.border-all-1px&::after-webkit-transform: scaleY(0.3)transform: scaleY(0.3)@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3).border-1px.border-all-1px&::after-webkit-transform: scaleY(0.3)transform: scaleY(0.3)

2.index.styl

@import "./mixin.styl"; @import "./base.styl";

3.mixin.styl

.border-1pxposition : relative&:afterdisplay: blockposition: absoluteleft: 0bottom: 0border-top 1px solid #dfddddwidth: 100%content: '' .border-all-1pxposition : relative&:afterdisplay: blockposition: absoluteleft: 0bottom: 0border 1px solid #dfddddwidth: 100%content: ''

引入

// 移動(dòng)端1px實(shí)線 import './stylus/index.styl'; // 此處根據(jù)個(gè)人路勁填寫(xiě)

調(diào)用

<div class="border-1px"></div>

如果是項(xiàng)目進(jìn)行中引用，可能會(huì)引發(fā)一些樣式變化，注意及時(shí)調(diào)整

總結(jié)

以上是生活随笔為你收集整理的vue 移动端 实现 一像素实线的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。