前端常見問題——一像素顯示

fsmStudy 發(fā)布于2019-08-29 16:28 / 2527人閱讀

摘要：關(guān)于一像素顯示的問題可以參考從像素問題剖析像素及和屏幕揭秘。解決方案如何解決一像素顯示問題可以參考博客種方法解決移動(dòng)端屏幕邊框問題。

關(guān)于一像素顯示的問題可以參考從1px像素問題剖析像素及viewport 和 iPhone 6 屏幕揭秘。

解決方案

如何解決一像素顯示問題可以參考博客 7種方法解決移動(dòng)端Retina屏幕1px邊框問題。

方案/優(yōu)缺點(diǎn)	兼容性	顏色	圓角	總結(jié)
0.5px 邊框	無(wú)法兼容安卓設(shè)備、 iOS 8 以下設(shè)備	支付	支持	簡(jiǎn)單，不需要過多代碼
使用 border-image	無(wú)	修改顏色麻煩，需要替換圖片	圓角需要特殊處理，并且邊緣會(huì)模糊	可以設(shè)置單條,多條邊框，且沒有性能瓶頸的問題
使用background-image實(shí)現(xiàn)	無(wú)	修改顏色麻煩, 需要替換圖片	圓角需要特殊處理，并且邊緣會(huì)模糊	可以設(shè)置單條,多條邊框，沒有性能瓶頸的問題
多背景漸變實(shí)現(xiàn)	多背景圖片有兼容性問題	支持	不支持	可以實(shí)現(xiàn)單條、多條邊框，邊框的顏色隨意設(shè)置，但是代碼量不少
使用 box-shadow 模擬邊框	無(wú)	邊框有陰影，顏色變淺	支持	代碼里少，可以滿足所有場(chǎng)景
viewport + rem 實(shí)現(xiàn)	無(wú)	支持	支持	所有場(chǎng)景都能滿足，一套代碼，可以兼容基本所有布局，但是老項(xiàng)目修改代價(jià)過大，只適用于新項(xiàng)目
偽類 + transform 實(shí)現(xiàn)	無(wú)	支持	支持(偽類和本體類都需要加border-radius)	所有場(chǎng)景都能滿足，對(duì)于已經(jīng)使用偽類的元素(例如clearfix)，可能需要多層嵌套

測(cè)試示例

一像素分割線

一像素分割線（viewport + rem 實(shí)現(xiàn)）

一像素邊框

一像素邊框（viewport + rem 實(shí)現(xiàn)）

最佳實(shí)踐

如果公司內(nèi)部已經(jīng)有成熟的 “viewport + rem” 實(shí)現(xiàn)方案，那就不需要考慮一像素問題了。對(duì)于沒有采用該方案的項(xiàng)目，可以結(jié)合 ”0.5px 邊框“ 和 “偽類 + transform 實(shí)現(xiàn)” 的實(shí)現(xiàn)方案。

HTML 的 header 標(biāo)簽里加入 0.5 像素檢測(cè)腳本（放在頭部可避免屏幕出現(xiàn)閃爍問題）

var docEl = document.documentElement;
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
  docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);

根據(jù)選擇器 .hairlines 和設(shè)備像素比來(lái)設(shè)置預(yù)定義的公共樣式

/* 分割線 */
.line-bottom,
.line-left,
.line-right,
.line-top {
  position: relative;
}
.line-top::before,
.line-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: #e8e8e8;
}
.line-left::before,
.line-right::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #e8e8e8;
}
.line-top::before {
  top: 0;
}
.line-bottom::after {
  bottom: 0;
}
.line-left::before {
  left: 0;
}
.line-right::after {
  right: 0;
}
.hairlines .line-top::before,
.hairlines .line-left::before,
.hairlines .line-right::after,
.hairlines .line-bottom::after {
  transform: none;
}
.hairlines .line-top::before,
.hairlines .line-bottom::after{
  height: 0.5px;
}
.hairlines .line-left::before,
.hairlines .line-right::after{
  width: 0.5px;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .line-top::before,
  .line-bottom::after {
    transform: scaleY(0.5);
  }
  .line-left::before,
  .line-right::after {
    transform: scaleX(0.5);
  }
}
/* 由于部分顏色比較淡，按實(shí)際比例縮放可能導(dǎo)致看不清分割線，所以可根據(jù)具體需求來(lái)決定是否按照實(shí)際像素比縮放 */
/*@media (-webkit-min-device-pixel-ratio: 3) {
  .line-top::before,
  .line-bottom::after {
    transform: scaleY(0.333333);
  }
  .line-left::before,
  .line-right::after {
    transform: scaleX(0.333333);
  }
} */
/* 邊框 */
.border {
  position: relative;
}
.border::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  transform-origin: left top;
}
.hairlines .border::after {
  display: none;
}
.hairlines .border {
  border: 0.5px solid #e8e8e8;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .border::after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
  }
}
/*@media (-webkit-min-device-pixel-ratio: 3) {
  .border::after {
    width: 300%;
    height: 300%;
    transform: scale(0.333333);
  }
} */

一像素顯示-最佳實(shí)踐

參考文獻(xiàn)

iPhone 6 屏幕揭秘 / iPhone 6 Screens Demystified

從1px像素問題剖析像素及viewport

7種方法解決移動(dòng)端Retina屏幕1px邊框問題

移動(dòng)web 1像素邊框瞧瞧大公司是怎么做的

Retina屏的移動(dòng)設(shè)備如何實(shí)現(xiàn)真正1px的線？

再談mobile web retina 下 1px 邊框解決方案

云服務(wù)器 GPU云服務(wù)器前端繪制像素一像素圖片顯示問題照片顯示問題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113761.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

fsmStudy

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

C++從0到1之命名空間

閱讀 3411·2021-11-25 09:43
立即更新您的Windows PC!微軟周二補(bǔ)丁修復(fù)易受主動(dòng)攻擊的0 Day漏洞!

閱讀 3085·2021-10-15 09:43
關(guān)于這個(gè)大一結(jié)束——————

閱讀 2037·2021-09-08 09:36
CSS相關(guān)面試題——三欄等高布局

閱讀 3031·2019-08-30 15:56
設(shè)置圖片水平垂直居中

閱讀 815·2019-08-30 15:54
浮動(dòng)及浮動(dòng)相關(guān)問題(初次)

閱讀 2754·2019-08-30 15:54
反思：我使用ID選擇器時(shí)應(yīng)該考慮這些問題

閱讀 3069·2019-08-30 11:26
004-盒模型及文本溢出

閱讀 1316·2019-08-29 17:27

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端常見問題——一像素顯示

相關(guān)文章

前端：移動(dòng)開發(fā) - 像素、viewport

像素，css像素，物理像素，設(shè)備獨(dú)立像素，分辨率大亂斗

前端移動(dòng)端適配總結(jié)

前端移動(dòng)端適配總結(jié)

發(fā)表評(píng)論

0條評(píng)論

fsmStudy

男|高級(jí)講師

TA的文章

C++從0到1之命名空間

立即更新您的Windows PC!微軟周二補(bǔ)丁修復(fù)易受主動(dòng)攻擊的0 Day漏洞!

關(guān)于這個(gè)大一結(jié)束——————

CSS相關(guān)面試題——三欄等高布局

設(shè)置圖片水平垂直居中

浮動(dòng)及浮動(dòng)相關(guān)問題(初次)

反思：我使用ID選擇器時(shí)應(yīng)該考慮這些問題

004-盒模型及文本溢出

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端常見問題——一像素顯示

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！