移動 web 1px 邊框解決方案

 

在移動端web頁面開發中，為了使css中使用的尺寸與設計稿一致，通常會采用 rem 單位配合 lib-flexible 來實現移動端的適配，在IOS設備上 flexible.js 會根據設備的分辨率動態的調整 viewport 的 width 和 scale 來達到目的。

但是，現在很多的安卓手機也是高分辨率的屏幕，有些1px邊框的按鈕和列表會顯得特別粗，flexible.js 只處理了IOS的手機，所以安卓手機需要我們自己處理。

JS處理

首先，可以通過 window.devicePixelRatio 拿到設備的像素比，然后給 html 標簽加上的相應的樣式。

function retina () { // 高分辨率屏幕處理 if (navigator.userAgent.toUpperCase().indexOf('IPHONE OS') !== -1) return; // IOS會縮放，不處理 var classNames = []; var pixelRatio = window.devicePixelRatio || 1; classNames.push('pixel-ratio-' + Math.floor(pixelRatio)); if (pixelRatio >= 2) { classNames.push('retina'); } var html = document.getElementsByTagName('html')[0]; classNames.forEach(function (className) { html.classList.add(className); }); }

這樣一來我們可以通過, html.pixel-ratio-2 給不同分辨率的屏幕加上特殊的樣式處理。

單個邊的1px方案

由於andorid不能設置0.5px像素的邊框，所以需要通過偽元素來模擬邊框，先使偽元素的高度為1px，然后使用transform: scale(.5)縮小相應的大小即可。具體實現代碼如下：

.item { position: relative; &:before{ content: ''; position: absolute; left: 0; top: 0; bottom: auto; right: auto; width: 1px; height: 100%; background-color: @color; display: block; z-index: 1; html.pixel-ratio-2 & { .transform(scaleX(0.5)); } html.pixel-ratio-3 & { .transform(scaleX(0.33)); } } }

然后不同方向的邊框，只需要跳轉偽元素的位置和縮放位置即可。該實現方案來自Framework7

邊框按鈕的1px方案

除了當個方向的邊框外，還有一種全邊框的按鈕，如果不做處理會顯得特別粗，但是偽元素只有 before 和 after 顯然剛才的單邊的方案不能用，所以只能采用其他方案。

當然還是利用偽元素畫邊框然后通過縮小，達到邊框變細的目的。首先我們使用偽元素畫四條邊，在將寬高調整到200%,最后再縮小50%，由於邊框是1px不會因寬高的改變而改變，所以我們縮小時邊框也會跟着變細。

.block-line { position: relative; border: 1px solid #000; // 正常情況下 html.pixel-ratio-2 & { border-color: rgba(0, 0, 0, 0); &:before { content: ""; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #000; transform: scale(0.5); transform-origin: 0 0; padding: 1px; box-sizing: border-box; pointer-events: none; } } html.pixel-ratio-3 & { border-color: rgba(0, 0, 0, 0); &:before { content: ""; width: 300%; height: 300%; position: absolute; top: 0; left: 0; border: 1px solid #000; transform: scale(0.33); transform-origin: 0 0; padding: 1px; box-sizing: border-box; pointer-events: none; } } }

此解決方案來自Frozen UI