国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

fsmStudy / 2461人閱讀

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

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

解決方案

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

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

一像素分割線

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

一像素邊框

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

最佳實踐

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

HTML 的 header 標簽里加入 0.5 像素檢測腳本（放在頭部可避免屏幕出現(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è)備像素比來設(shè)置預定義的公共樣式

/* 分割線 */
.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);
  }
}
/* 由于部分顏色比較淡，按實際比例縮放可能導致看不清分割線，所以可根據(jù)具體需求來決定是否按照實際像素比縮放 */
/*@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);
  }
} */

一像素顯示-最佳實踐

參考文獻

iPhone 6 屏幕揭秘 / iPhone 6 Screens Demystified

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

7種方法解決移動端Retina屏幕1px邊框問題

移動web 1像素邊框 瞧瞧大公司是怎么做的

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113761.html

相關(guān)文章

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

    摘要：表示單位面積上的物理像素點數(shù)目。比如原本像素高的頂部導航欄，在屏上用了個像素的高度來顯示。參考譯此像素非彼像素譯不是像素的像素不是像素移動前端開發(fā)之的深入理解移動端尺寸基礎(chǔ)知識張鑫旭設(shè)備像素比簡單介紹 知識 CSS 像素、物理像素、PPI CSS 像素 CSS 像素 是 Web 編程的概念，本質(zhì)上是為我們 Web 開發(fā)者創(chuàng)建的一個抽象結(jié)構(gòu)，是相對的而不是絕對的。 物理像素 物理像素 是...

    QLQ 評論0 收藏0

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

    摘要：我們用小米舉例，屏幕像素物理像素為，設(shè)備獨立像素為，也就是說，一個設(shè)備獨立像素就包含個物理像素，同時我們能得出。 本文主要闡述移動端布局中常遇到的一些基本概念，這些概念也適用于PC端，這些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，設(shè)備獨立像素（devicedependent pixel） 像素 像素是圖像顯示的基本單位，同時...

    LiveVideoStack 評論0 收藏0

  • 前端移動端適配總結(jié)

    摘要：設(shè)備像素比縮寫簡稱，也就是我們經(jīng)常在谷歌控制臺移動端調(diào)試頂端會看到的一個值。在移動端，默認的情況下，布局視口的寬度是要遠遠大于瀏覽器的寬度的。手淘團隊布局現(xiàn)今，適配手機端 meta標簽到底做了什么事情 做過移動端適配的小伙伴一定有遇到過這行代碼： 但是，很多小伙伴只是感性的認識：噢，我加了這行代碼，然后頁面的寬度就會跟我的設(shè)備寬度一致。然而，這種理解是很片面的。那么，這句話的本質(zhì)到底...

    sydMobile 評論0 收藏0

  • 前端移動端適配總結(jié)

    摘要：設(shè)備像素比縮寫簡稱，也就是我們經(jīng)常在谷歌控制臺移動端調(diào)試頂端會看到的一個值。在移動端，默認的情況下，布局視口的寬度是要遠遠大于瀏覽器的寬度的。手淘團隊布局現(xiàn)今，適配手機端 meta標簽到底做了什么事情 做過移動端適配的小伙伴一定有遇到過這行代碼： 但是，很多小伙伴只是感性的認識：噢，我加了這行代碼，然后頁面的寬度就會跟我的設(shè)備寬度一致。然而，這種理解是很片面的。那么，這句話的本質(zhì)到底...

    justjavac 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<