兩倍屏和三倍屏中的1px處理方法
阿新 • • 發佈：2019-02-14
在做移動端頁面時會面臨一個問題，就是兩倍屏和三倍屏問題，例如在iPhone6中就是兩倍屏在iPhone6 plus中就是三倍屏，在手機頁面中1px的線條會呈現2px和3px的效果，這樣給使用者的體驗是非常不好的，所以需要解決這個問題，當然在移動端中border的1px問題還沒有好的方法，所以要儘量避免border，這裡講的用偽類做1px線條；這裡為了視覺效果我用的是10px；
思路：首先隨意準備一個塊元素，然後在塊元素後面用偽類的方法新增一個線條，然後用@media的方法在移動端除錯；
<!DOCTYPE html>
<html lang="en">
<head 然後給box後面新增一個線條這面我用mixin分裝了一個偽類如下：
@mixin border_1px($color){
&::after 這時的效果如圖所示；
這時用@media的方法當在2倍屏和3倍屏時給是線條壓縮，使其視覺效果變正常
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
.border1px{
&::after{
transform: scaleY(.7);
background:green;
}
}
}
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
.border1px{
&::after{
transform: scaleY(.5);
background: blue;
}
}
}效果如下圖；
三倍屏：
兩倍屏：
這裡我是做了分裝，以便以後使用。