移動端1px實線

描述：因為移動端設備分辨率高，所以H5中的1px到移動端上后，變粗了；
解決方法：
1.通過媒體查詢判斷出移動端設備
2.使用transform將1px實線縮放
此處使用的是stylus方案，如果項目中不支持stylus，則需要引入

創建三個文件 (在一個文件下)

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: ''

引入

// 移動端1px實線 import './stylus/index.styl'; // 此處根據個人路勁填寫

調用

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

如果是項目進行中引用，可能會引發一些樣式變化，注意及時調整

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。