可能有人會問，設定邊框1px問題，直接 border:1px soild #ccc; 不就完事了，為什麼需要這麼麻煩？因為移動端的dpr裝置畫素比不同，直接設定會出現邊框加粗問題，親們可以自行測試，這裡不做過多闡述。下面直接上解決方案。1.為了方便通用，在
base.scss檔案中 使用 mixin 定義乙個函式。（mixin是sass定義函式的關鍵字）
@mixin
border-1px
($color)
}
base.scss檔案中寫。對 偽類 :after 進行縮放，以適應不同 dpr 的手機。通過 @media (**查詢)，來確定 裝置的 dpr。 為了方便呼叫，定義乙個全域性的 class (此處為 border-1px)；
/*判斷在不同dpr下的顯示情況*/
@media
(-webkit-min-device-pixel-ratio
: 1.5),(
min-device-pixel-ratio
: 1.5) }
}@media
(-webkit-min-device-pixel-ratio
: 2),(
min-device-pixel-ratio
: 2) }
}
border-1px類
class
="tab border-1px"
>
class
="tab-item"
>
v-link=""
>
商品a>
div>
class
="tab-item"
>
v-link=""
>
評價a>
div>
class
="tab-item"
>
v-link=""
>
商家a>
div>
div>
5.測試效果，1px 看不出效果，這裡我設定的是10px方便測試檢視；
①：設定為10px，沒有使用上面第步驟三做dpr處理效果
②：設定10px，使用了上面步驟三做dpr處理效果，明顯細了一半。由此可以得出設定1px也會縮小一半，解決了設定1px，真機下會2px加粗的效果。
移動端1px實現
新增css 1px邊框時，在手機上顯示為粗線，解決辦法就是利用偽類設定1px邊框，然後根據裝置畫素比進行y軸的縮放，使其表現為真正的1px.stylus的語法 1.定義乙個函式。找到要加1px的標籤，新增定位和偽類。border 1px color position relative after d...
移動端1px問題
在移動端頁面中設定邊框為1px時，在有的裝置中可能會發現邊框比1px要粗即1培訓1px 1px 裝置畫素比dpr 裝置畫素 css畫素 某一方向上 當dpr為2時1px實際為2px iphone6 dpr為3時1px為3px inphoex 所有看起來1px就會變粗 ios8下已經支援帶小數的px值...
移動端1px問題
在高清屏下，移動端的1px 會很粗。那麼為什麼會產生這個問題呢？主要是跟乙個東西有關，dpr devicepixelratio 裝置畫素比，它是預設縮放為100 的情況下，裝置畫素和css畫素的比值。window.devicepixelratio 物理畫素 css畫素目前主流的螢幕dpr 2 iph...