1px問題 · 前端筆記

[TOC] # 1px 為了適配各種屏幕，我們寫代碼時一般使用設備獨立像素來對頁面進行布局。 而在設備像素比大于`1`的屏幕上，我們寫的`1px`實際上是被多個物理像素渲染，這就會出現`1px`在有些屏幕上看起來很粗的現象。 # border-image 基于`media`查詢判斷不同的設備像素比給定不同的`border-image`： ~~~ .border_1px{ border-bottom: 1px solid #000; } @media only screen and (-webkit-min-device-pixel-ratio:2){ .border_1px{ border-bottom: none; border-width: 0 0 1px 0; border-image: url(../img/1pxline.png) 0 0 2 0 stretch; } } ~~~ # background-image 和`border-image`類似，準備一張符合條件的邊框背景圖，模擬在背景上。 ~~~ .border_1px{ border-bottom: 1px solid #000; } @media only screen and (-webkit-min-device-pixel-ratio:2){ .border_1px{ background: url(../img/1pxline.png) repeat-x left bottom; background-size: 100% 1px; } } ~~~ 上面兩種都需要單獨準備圖片，而且圓角不是很好處理，但是可以應對大部分場景。 # 偽類 + transform 基于`media`查詢判斷不同的設備像素比對線條進行縮放： ~~~ .border_1px:before{ content: ''; position: absolute; top: 0; height: 1px; width: 100%; background-color: #000; transform-origin: 50% 0%; } @media only screen and (-webkit-min-device-pixel-ratio:2){ .border_1px:before{ transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio:3){ .border_1px:before{ transform: scaleY(0.33); } } ~~~ 這種方式可以滿足各種場景，如果需要滿足圓角，只需要給偽類也加上`border-radius`即可。 # svg 上面我們`border-image`和`background-image`都可以模擬`1px`邊框，但是使用的都是位圖，還需要外部引入。 借助`PostCSS`的`postcss-write-svg`我們能直接使用`border-image`和`background-image`創建`svg`的`1px`邊框： ~~~ @svg border_1px { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } } .example { border: 1px solid transparent; border-image: svg(border_1px param(--color #00b1ff)) 2 2 stretch; } ~~~ 編譯后： ~~~ .example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch; } ~~~ 上面的方案是大漠在他的文章中推薦使用的，基本可以滿足所有場景，而且不需要外部引入，這是我個人比較喜歡的一種方案。 # 設置viewport 通過設置縮放，讓`CSS`像素等于真正的物理像素。 例如：當設備像素比為`3`時，我們將頁面縮放`1/3`倍，這時`1px`等于一個真正的屏幕像素。 ~~~ const scale = 1 / window.devicePixelRatio; const viewport = document.querySelector('meta[name="viewport"]'); if (!viewport) { viewport = document.createElement('meta'); viewport.setAttribute('name', 'viewport'); window.document.head.appendChild(viewport); } viewport.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale); ~~~ 實際上，上面這種方案是早先`flexible`采用的方案。 當然，這樣做是要付出代價的，這意味著你頁面上所有的布局都要按照物理像素來寫。這顯然是不現實的，這時，我們可以借助`flexible`或`vw、vh`來幫助我們進行適配。 # 參考資料 [關于移動端適配，你必須要知道的](https://juejin.im/post/5cddf289f265da038f77696c)