retina屏中1物理像素border的實現

孫淑建發布于2019-08-29 13:51 / 3455人閱讀

摘要：問題的產生屏會以個乃至個物理像素來顯示一個像素，所以在中指定的邊框實際占據的卻是個以上物理像素，在屏用戶體驗較差。這其中，的媒體查詢里提供了或而瀏覽器也提供了這個來獲取像素和物理像素的比值。

問題的產生

retina屏會以2個（乃至3個）物理像素來顯示一個CSS像素（1px），所以在CSS中指定1px的邊框實際占據的卻是2個以上物理像素，在retina屏用戶體驗較差。

幾種解決方案（考慮1px=2dip） 使用0.5px

問題：只在Firefox and Safari 8+支持，安卓不支持。

使用圖片

采用一張圖片作為border：

        border-width: 1px;border-image:url(border.gif) 2 repeat;

border-img屬性會將圖片（如上圖）切為九宮格，放到邊框的四邊和四角。由于圖片外沿一半為實色、一半為透明，所以1px的圖片邊框，實際顯示出的就是0.5px的邊框了。

問題：

無法設置顏色

邊框實際還是占用了1px的空間

不使用base64的情況下，要加載多一張圖片

使用漸變

原理類似上面的圖片，將1px的漸變拆為兩半，一半透明一半實色，但好處是作為背景不會實際占據盒子的0.5px空間。

        background:linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
                    linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat, 
                    linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat, 
                    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;

問題：無法處理圓角

使用縮放

給一個原元素兩倍大小的偽元素，指定1px邊框，再縮小一半，即可得到0.5px邊框。

        .retina-border-scale{
            position: relative;
        }
        .retina-border-scale:before{
            content:"";
            border: 1px solid black;
            transform:scale(0.5);
            transform-origin: 0 0;
            width: 200%;height: 200%;
            position: absolute;
            left: 0;
            top: 0;
        }

問題：

原元素需要用相對定位

元素上不起作用

其他方法

使用box-shadow：實現簡單，但效果不好、會有陰影

直接按照放大的設計稿重構，再指定viewport的initial-scale=0.5縮小整個頁面：簡單粗暴

對非retina屏的兼容

由于非retina屏下的1物理像素border直接用px做單位即可，因此針對不同屏幕，會有多套樣式實現。
而為了正確地應用樣式，首先得有判斷retina屏的能力。這其中，CSS的媒體查詢里提供了min-device-pixel-ratio或min-resolution；而瀏覽器也提供了window.devicePixelRatio這個js API來獲取CSS像素和物理像素的比值。
最后，我們就可以根據屏幕在代碼里應用適當的樣式了。

ref

CSS, Retina, and Physical Pixels

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112748.html

再談移動端適配和點5像素的由來

摘要：再談移動端適配百分比解決方案的缺點在我們的項目中大量的使用百分比來解決頁面在寬度上的自適應，其實在高度上并沒有很好的自適應。前言這篇文章的內容如題目一樣，主要分為兩個部分，談談業內主流的移動端適配解決方案點5像素的由來和實現方法建議在讀這篇文章的時候先讀下這篇文章《高清屏概念解析與檢測設備像素比的方法_20161005》，因為這些文章涉及的很多概念在這篇文章中都會提到。 ...

lordharrd 2019-08-20 11:31 評論0 收藏0
高清屏概念解析與檢測設備像素比的方法

摘要：高清屏概念解析和前端開發的關系高清屏概念解析高清屏概念的興起主要是從喬幫主發布設備開始興起。還好我們有一個叫設備像素比的東西來檢測當前屏幕是不是屬于高清屏幕。前言做移動端h5開發很久了，從開始入行到現在。很多知識和工具都是在用前輩留下的遺產，都沒有深入的研究過原因，了解為什么要這么去做。也許自己也是過了交給自己做什么就做什么的階段了。在國慶節有一個大塊的時間，把最近看到的知識總結...

王偉廷 2019-08-29 11:22 評論0 收藏0
零碎的知識（一）

摘要：同時，由于本身的實現大部分是純函數，因此在版本中，一些不含副作用的均在中暴露了以為前綴的函數方法，也可以直接導入使用。在瀏覽器中神秘丟失嘗試檢查被請求的是否存在尾部斜線，具體原因暫時沒有找到相關資料。寫在前面最近沒怎么寫新的東西，一是因為一直在準備換新的工作，所以一直在準備面試，二是因為過年，心靜不下來，所以也無法輸出或者翻譯一些文章，三是由于手頭還有一些遺留工作需要完成和交接，比...

ernest.wang 2019-08-23 15:36 評論0 收藏0