日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

為了便于更好的理解本文，下面對(duì)像素相關(guān)概念進(jìn)行梳理。

簡(jiǎn)單來說就是像素單位基本分為三種：設(shè)備像素(物理像素)、設(shè)備獨(dú)立像素(邏輯像素)、CSS 像素。下文將會(huì)圍繞相關(guān)概念展開討論。

話不多說，正文開始~~

為什么使用 1px 會(huì)出現(xiàn)問題

自從 2010 年 iPhone4 推出了 Retina 屏開始，移動(dòng)設(shè)備屏幕的像素密度越來越高，于是便有了 2 倍屏、3 倍屏的概念。簡(jiǎn)單來說，就是手機(jī)屏幕尺寸沒有發(fā)生變化，但屏幕的分辨率卻提高了一倍，即同樣大小的屏幕上，像素多了一倍。

那么我們獲取到的 CSS 像素就不是真實(shí)的物理像素點(diǎn)了，于是便有了設(shè)備像素比的概念（ ??devicePixelRatio?? 簡(jiǎn)稱 dpr）。它用來描述屏幕物理像素與邏輯像素的比值。不同手機(jī)有不同的設(shè)備像素比，可參考 ?wiki 百科中對(duì)視網(wǎng)膜屏的描述 。

CSS 中的 1px 并不等于設(shè)備的 1px

對(duì)于前端來說，在高清屏出現(xiàn)之前，前端代碼的 ??1px??? 即等于手機(jī)物理像素點(diǎn)的 ??1px???。但有了 dpr 的概念之后，由于前端代碼中的使用的是 CSS 像素，手機(jī)會(huì)根據(jù) dpr 換算成實(shí)際的物理像素大小來渲染頁面。比如 iPhone6 的設(shè)備像素比 ??dpr = 2??? ，相當(dāng)于一個(gè) CSS 像素等于兩個(gè)物理像素，即 ??1px?? 由 2個(gè)物理像素點(diǎn)組成。

那么問題來了，以 iPhone6 為例，其 ??dpr = 2???、屏幕尺寸(CSS 像素) 為 ??375x667???，一般設(shè)計(jì)稿提供 2 倍圖尺寸為 ??750x1334??? 。那么設(shè)計(jì)稿中的 ??1px???，對(duì)應(yīng)屏幕尺寸其實(shí)應(yīng)該寫成 ??0.5px???。再由 dpr 計(jì)算公式可知，??0.5 * 2 = 1px?? 物理像素。

此時(shí)你應(yīng)該已經(jīng)發(fā)現(xiàn)了，設(shè)計(jì)稿要實(shí)現(xiàn) ??1px??? 細(xì)線、??1px??? 邊框，為什么前端實(shí)現(xiàn)總是偏粗的？那是因?yàn)槿绻阍诖a中直接寫成 ??1px???，再通過 dpr 計(jì)算之后其實(shí)是 ??2px?? 物理像素，并不符合設(shè)計(jì)稿的要求。

其實(shí)設(shè)計(jì)稿本質(zhì)上要實(shí)現(xiàn)的是 CSS 像素的 ！

那么當(dāng) ??dpr=2??? 時(shí)，代碼中直接寫成 ??0.5px?? 就解決問題了嗎？

小數(shù)點(diǎn)像素 0.5px 的兼容性問題

其實(shí)在項(xiàng)目中，我們已經(jīng)采用 rem 單位進(jìn)行了設(shè)計(jì)稿與屏幕尺寸的換算，即把 ??1px??? 換算成了 ??0.5px?? 。但這種方案其實(shí)有各種各樣的兼容性問題。

PC端

先上結(jié)論，在 PC 端瀏覽器的最小識(shí)別像素為 ??1px??。

所以在開發(fā)階段，當(dāng)在開發(fā)者工具上進(jìn)行頁面調(diào)試時(shí)，可以看到即便代碼中是 ??0.5px??? ，但默認(rèn)會(huì)被瀏覽器識(shí)別并渲染為 ??1px??。所以在瀏覽器看來總是偏粗了。如果你習(xí)慣用 PC 端的頁面來進(jìn)行視覺走查，那么結(jié)果可想而知...

上圖中兩個(gè)元素 ??width:200px;height:100px???，分別為 ??border:0.5px???、??border:1px??? ，檢查元素時(shí)可以看到頁面上 ??border=0.5px??? 的元素計(jì)算大小后和 ??1px??? 效果是一樣的，均是 ??width:202px;height:102px???。說明瀏覽器都識(shí)別成 ??1px?? 了。

由上面的 gif 圖也可以看到，因?yàn)樵O(shè)備 ??dpr=2???，所以放大后 ??1px??? 的確是使用了2個(gè)物理像素點(diǎn)來渲染。并不是我們想實(shí)現(xiàn)的 ??0.5px??。

移動(dòng)端

在手機(jī)端，不同手機(jī)瀏覽器對(duì)小數(shù)點(diǎn)像素的處理效果就更千奇百怪了。

首先我們先來看一下采用 REM 布局方式下，代碼中的 0.01rem 到底被換算成了多少？

這里簡(jiǎn)單說下 REM 實(shí)現(xiàn)原理

??rem（font size of the root element）???，即根據(jù)網(wǎng)頁的根元素（??html???）來設(shè)置字體大小。和 ??em（font size of the element）??? 的區(qū)別是，??em?? 是根據(jù)其父元素的字體大小來進(jìn)行設(shè)置。

簡(jiǎn)單來說，rem 布局實(shí)現(xiàn)移動(dòng)端適配的思想是，由于 rem 單位是根據(jù)頁面根元素的 ??fontSize??? 來計(jì)算的，那么將 ??fontSize??? 設(shè)置成屏幕寬度 ??clientWidth??? 與設(shè)計(jì)稿寬度 ??750??? 的比值，那么我們按照設(shè)計(jì)稿的尺寸來重構(gòu)頁面的時(shí)候，使用 rem 單位即自動(dòng)乘以 ??fontSize?? 計(jì)算出了適配不同屏幕的尺寸。

// 以750設(shè)計(jì)稿為例，計(jì)算rem font-size
let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
let ft = (clientWidth / 7.5).toFixed(2);
// 設(shè)置頁面根字號(hào)大小
document.documentElement.style.fontSize = ft + "px";

由上面的計(jì)算方式可知，不同屏幕寬度會(huì)計(jì)算出不同 ??fontSize??? ，那么 ??0.01rem?? 到底被換算成了多少呢？下面舉例計(jì)算了幾個(gè)機(jī)型的“1像素”大小

由表格可看出，不同手機(jī)計(jì)算的“1px”大小差別很大，而且手機(jī)本身對(duì)小數(shù)點(diǎn)的處理情況就存在較大的兼容性問題。

比如 IOS8+ 系列都已經(jīng)支持 ??0.5px??? 了，可以借助媒體查詢來處理，但是安卓手機(jī)對(duì)小數(shù)像素的表現(xiàn)形式卻各不相同。網(wǎng)上關(guān)于不同型號(hào)手機(jī)瀏覽器對(duì)小數(shù)點(diǎn)的處理情況的資料較少，只知道在一些低版本的系統(tǒng)里，??0.5px??? 將會(huì)被顯示為 ??0px???；有的能夠畫出半個(gè)像素的邊，有的大于 ??0.55px??? 當(dāng)成 ??1px???，有的大于 ??0.75px??? 當(dāng)成 ??1px??，從表格計(jì)算結(jié)果來看是很難直接實(shí)現(xiàn)適配的。

比如 HUAWAI P30 的 ??0.01rem??? 計(jì)算后為 ??0.48px??? ，這種較小的小數(shù)像素其 ??border?? 已經(jīng)無法正常展示了。

那么如何實(shí)現(xiàn) 1px 的效果？

在進(jìn)行一番調(diào)研之后，發(fā)現(xiàn)目前的實(shí)現(xiàn)方案都離不開以下三種。

1. 使用??偽元素 + CSS3``縮放??的方式
2. 使用??動(dòng)態(tài) viewport + rem 布局??? 的方式（即??Flexible?? 實(shí)現(xiàn)方案）
3. 新方案：使用??vw 單位??適配方案（將來推薦的一種方案，但目前項(xiàng)目中沒有實(shí)際應(yīng)用，故本文不做討論）

1. 偽元素 + CSS3縮放

其實(shí)這種方案也是大家在項(xiàng)目中經(jīng)常使用的方式。文本主要對(duì)其實(shí)現(xiàn)原理進(jìn)行分析。

前面已經(jīng)討論過要實(shí)現(xiàn)設(shè)計(jì)稿中的 ??1px???，其實(shí)代碼中要實(shí)現(xiàn) ??0.5px?? ?？s放的方式就是避免了直接寫小數(shù)像素帶來的不同手機(jī)的兼容性處理不同。先上代碼：

// 通過偽元素實(shí)現(xiàn) 0.5px border
.border::after {
    content: "";
    box-sizing: border-box; // 為了與原元素等大
    position: absolute;
    left: 0;
    top: 0;
    width: 200%; 
    height: 200%; 
    border: 1px solid gray;
    transform: scale(0.5); 
    transform-origin: 0 0;
}

// 通過偽元素實(shí)現(xiàn) 0.5px 細(xì)線
.line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 1px;
    background: #b3b4b8;
    transform: scale(0.5);
    transform-origin: 0 0;
}

// dpr適配可以這樣寫
@media (-webkit-min-device-pixel-ratio: 2)  {
    .line::after {
        ...
        height: 1px;
        transform: scale(0.5);
        transform-origin: 0 0;
    }
}

@media (-webkit-min-device-pixel-ratio: 3)  {
    .line::after {
        ...
        height: 1px;
        transform: scale(0.333);
        transform-origin: 0 0;
    }
}

為什么要先放大 200% 再縮小 0.5？

為了只縮放 ??border??? 1px 的粗細(xì)，而保證 ??border??? 的大小不變。如果直接 ??scale(0.5)??? 的話 ??border??? 整體大小也會(huì)變成二分之一，所以先放大 200%（放大的時(shí)候 ??border?? 的粗細(xì)是不會(huì)被放大的）再縮放，就能保持原大小不變了。

為什么采用縮放的方式，就可以解決手機(jī)對(duì)小數(shù)點(diǎn)處理的兼容性問題？

此處我是這樣理解的。首先代碼中處理的是 ??1px??? ，避免了直接操作小數(shù)像素的問題；當(dāng) ??dpr=2??? 時(shí)，換算成物理像素為 2px，此時(shí)去縮放 ??scale(0.5)???、當(dāng) ??dpr=3??? 時(shí)，換算成物理像素為 3px，此時(shí)縮放 ??scale(0.3)??? 后，手機(jī)均會(huì)默認(rèn)使用最小物理像素 ??1px??? 來渲染。按照 CSS3 ??transform??? 的 ??scale?? 定義，邊框可以任意細(xì)，理論上可以實(shí)現(xiàn)任意細(xì)的縮放效果。

該方案的優(yōu)點(diǎn)在于，針對(duì)老項(xiàng)目使用縮放的形式可以快速實(shí)現(xiàn) ??1px?? 的效果。

需要注意的是，我們是在 ??1px?? 的基礎(chǔ)上進(jìn)行縮放！

• 如果項(xiàng)目中使用了 rem 單位的話，此處的??1px?? 是不能用 rem 單位的，否則根據(jù) rem 換算后再進(jìn)行縮放，會(huì)使得邊框變得更細(xì)。
• 如果項(xiàng)目中使用了??postcss-pxtorem??? 插件進(jìn)行編譯的話，記得不要對(duì)??1px?? 進(jìn)行編譯。配置文檔參考?postcss-pxtorem。

.ignore {
border: 1Px solid; // ignored
border-width: 2PX; // ignored }

??Px??? or ??PX??? is ignored by ??postcss-pxtorem?? but still accepted by browsers。

2. 動(dòng)態(tài) Viewport + REM 方式

第二種實(shí)現(xiàn)方案是采用動(dòng)態(tài)設(shè)置 ??viewport + rem??? 布局，該方案其實(shí)是參考了阿里早期開源的一個(gè)移動(dòng)端適配解決方案 ??flexible??? ，本文進(jìn)行了一些改進(jìn)。該方案不僅解決了移動(dòng)端適配的問題，同時(shí)也較好的解決了 ??1px?? 的問題。

在理解它的實(shí)現(xiàn)原理之前，我們先來了解幾個(gè)關(guān)鍵概念 ??viewport視口??? 及 ??meta 標(biāo)簽??? 及 頁面縮放 ??initial-sacle??。

視口

就是瀏覽器上(或者是一個(gè) APP 中的 ??webview??? )用來顯示網(wǎng)頁的那部分區(qū)域，但 ??viewport?? 又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。

網(wǎng)上關(guān)于 ??viewport?? 的介紹比較經(jīng)典的就是 ?Peter-Paul Koch 的 ?A tale of two viewports 。它闡述了三種 ??viewport???，我們一般最常用的是 ??layout viewport??? (瀏覽器默認(rèn)的 ??viewport??)。默認(rèn)寬度大于瀏覽器可視區(qū)域的寬度，所以瀏覽器默認(rèn)會(huì)出現(xiàn)橫向滾動(dòng)條。

const clientWidth = document.documentElement.clientWidth || document.body.clientWidth

通過 meta 標(biāo)簽設(shè)置

如果不設(shè)置 ??meta??? 標(biāo)簽的話，由于 ??viewport??? 默認(rèn)寬度是大于瀏覽器可視區(qū)域的，所以需要通過設(shè)置 ??viewport??? 的寬度等于屏幕寬 ??width=device-width?? 來避免出現(xiàn)橫向滾動(dòng)條。

  name="viewport" 
  content="
    width=device-width,  // 設(shè)置viewport的寬等于屏幕寬
    initial-scale=1.0,  // 初始縮放為1
    maximum-scale=1.0, 
    user-scalable=no,  // 不允許用戶手動(dòng)縮放
    viewport-fit=cover // 縮放以填充滿屏幕
    " 
>

• ???name??? 設(shè)置元數(shù)據(jù)的名稱，??content??? 設(shè)置元數(shù)據(jù)的值。??name??? 屬性值為??viewport?? 時(shí)，表示設(shè)置有關(guān)視口初始大小的提示，僅供移動(dòng)端使用
• ?同時(shí)設(shè)置??width=device-width,initial-scale=1.0?? 是為了兼容 iOS 和 IE 瀏覽器

關(guān)于頁面縮放

??initial-scale??? 縮放值越大，當(dāng)前 ??viewport?? 的寬度就會(huì)越小，反之亦然。

 比如屏幕寬度是 ??320px??? 的話，如果我們?cè)O(shè)置 ??initial-scale=2??? ，此時(shí) ??viewport??? 的寬度會(huì)變?yōu)橹挥???160px??? 了。這也好理解，放大了一倍嘛，就是原來 ??1px??? 的東西變成 ??2px??? 了，但是并不是把原來的 ??320px??? 變?yōu)???640px??? ，而是在實(shí)際寬度不變的情況下，??1px??? 變得跟原來的 ??2px?? 的長(zhǎng)度一樣了。

所以縮放頁面的時(shí)候，實(shí)際上改變了 CSS 像素的大小，而數(shù)量不變。所以原來需要 ??320px??? 才能填滿的寬度現(xiàn)在只需要 ??160px?? 就做到了。

在開篇的表格中對(duì)

CSS 像素的定義是，不考慮縮放情況下，1個(gè) CSS 像素等于1個(gè)設(shè)備獨(dú)立像素。頁面放大 200% 時(shí)，CSS

像素個(gè)數(shù)不變，大小變?yōu)槎?，相?dāng)于一個(gè) CSS 像素在橫縱向上會(huì)覆蓋兩個(gè)設(shè)備獨(dú)立像素。瀏覽器窗口可容納的設(shè)備獨(dú)立像素?cái)?shù)量是不變的，所以可視區(qū)域內(nèi)

CSS 像素?cái)?shù)量變少。

Flexible 適配方案及問題

有了上面幾個(gè)概念，下面我們來說說 ??flexible?? 方案的實(shí)現(xiàn)原理及歷史遺留問題。

Flexible 的大致實(shí)現(xiàn)思路是，首先根據(jù) dpr 來動(dòng)態(tài)修改 ??meta??? 標(biāo)簽中 ??viewport??? 中的 ??initial-scale??? 的值，以此來動(dòng)態(tài)改變 ??viewport??? 的大?。蝗缓箜撁嫔辖y(tǒng)一使用 rem 來布局，??viewport??? 寬度變化會(huì)動(dòng)態(tài)影響 ??html??? 中的??font-size?? 值，以此來實(shí)現(xiàn)適配。

為什么不直接引用 flexible 庫來進(jìn)行移動(dòng)端適配呢？

因?yàn)???lib-flexible??? 這個(gè)庫目前基本被棄用，由于該方案誕生較早，官方也是認(rèn)為 ??flexible??? 已經(jīng)完成了它的歷史使命，比如當(dāng)時(shí)它只處理了 iOS 不同 dpr的場(chǎng)景，安卓設(shè)備下默認(rèn)都設(shè)置為 ??dpr = 1?? 等，這是有問題的。有關(guān)于這方面的詳細(xì)使用可以閱讀早期整理的文章 ?使用Flexible實(shí)現(xiàn)手淘H5頁面的終端適配 。

在日常的業(yè)務(wù)場(chǎng)景中，雖然我們不會(huì)去使用 ??flexible??? 庫，但其實(shí)大多還是沿用 ??flexible?? 實(shí)現(xiàn)的原理來進(jìn)行移動(dòng)端適配，并從中進(jìn)行了一些改進(jìn)來達(dá)到適配的目的。

下面為簡(jiǎn)單實(shí)現(xiàn)

          name="viewport"
      content="width=device-width,user-scalable=no,initial-scale=1,
                minimum-scale=1,maximum-scale=1,viewport-fit=cover"
    />
    
  

為什么頁面縮放比例 initial-scale 設(shè)置為 1 / dpr ？

這也是為什么前文大篇幅去闡述設(shè)備像素比 ??dpr??、縮放等概念了。

通過設(shè)置頁面縮放比例為 ??1/dpr???，可將 ??viewport??? 的寬度擴(kuò)大 ??dpr??? 倍。還是以 iPhone6 手機(jī)為例，不進(jìn)行頁面縮放時(shí) ??viewport??? 寬度 ??375px???、??dpr=2???。由于 ??dpr?? 的存在使得一個(gè) CSS 像素需要兩個(gè)物理像素來渲染。

當(dāng)設(shè)置 ??initial-scale = 1 / dpr = 0.5??? 時(shí)，獲取到的 ??viewport??? 寬度 ??clientWidth = 750px??? ，被擴(kuò)大了 ??dpr??? 倍，就正好是設(shè)備物理像素的寬度。簡(jiǎn)單推導(dǎo)一下就是，當(dāng) ??scale=0.5??? 時(shí)，由于 ??viewport?? 內(nèi)可容納的 CSS 像素?cái)?shù)量的增多，相當(dāng)于一個(gè)設(shè)備獨(dú)立像素在橫縱向上會(huì)覆蓋兩個(gè) CSS 像素，

CSS像素個(gè)數(shù) =  設(shè)備獨(dú)立像素個(gè)數(shù) /  scale   = （ 物理像素個(gè)數(shù) / dpr ）/ scale
scale = 1 / dpr 
// 所以
CSS像素個(gè)數(shù) = 物理像素個(gè)數(shù)

此時(shí)我們寫的 ??1px??? 其實(shí)正好是一個(gè)物理像素的大小，并且可以較好的畫出 ??1px??? 的邊框，從而提高顯示精度，從此我們就可以愉快地直接寫 ??1px??? 啦！同時(shí)這個(gè)方案也較好的解決了只使用 rem 進(jìn)行布局時(shí)，出現(xiàn)計(jì)算后的各種 ??0.5px、0.55px?? 等問題。完美~

#實(shí)戰(zhàn)對(duì)比

下面為 border 的幾種實(shí)現(xiàn)方式在不同測(cè)試機(jī)的對(duì)比圖。

測(cè)試機(jī)型為 ??iPhone6???、??iPhone6Plus???、??iPhoneXR???、??HUAWEI P30???，以 ??750??? 的設(shè)計(jì)稿為例，設(shè)置 ??fontSize = clientWidth / 7.5 + 'px'??。

4.1 首先采用第一種解決方案即 縮放的形式

按鈕1：直接寫 ??1px??，根據(jù) dpr 計(jì)算可知，效果總是偏粗的。

按鈕2：rem 布局下，不改變 ??viewport??? 的縮放比，即 ??initial-scale= 1???，??fontSize??? 計(jì)算后范圍在 ??48px~55px??? 不等，??0.01rem??? 計(jì)算后 ??iPhone6??? 為 ??0.5px??? ，??dpr=2???，顯示效果較好；而 ??Huawei P30??? 的 ??0.01rem = 0.48px??，此時(shí)邊框已經(jīng)展示不清楚了?？傮w來說效果展示偏細(xì)。

? 按鈕3：也是 rem 布局下，??initial-scale= 1??，使用了第一種解決方案， 縮放 0.5 后，總體效果展示較好。

4.2 采用第二種解決方案，即動(dòng)態(tài)設(shè)置 布局方式的對(duì)比圖

設(shè)置 rem 布局下，

? 按鈕1：直接寫 ??1px??

? 按鈕4：使用 ??0.01rem???，不同機(jī)型 ??fontSize??? 在 ??100px~144px???之間，??0.01rem??? 計(jì)算后基本都大于等于 ??1px??。

分析下計(jì)算過程：

• ???iPhone6??? 屏幕寬??375px???，??dpr = 2???、??initial-scale= 0.5??? 時(shí)，??clientWidth??? 變?yōu)??750px???，根元素??fontSize = 100px???，那么??0.01rem??? 正好等于??1px??，并且大小和設(shè)計(jì)稿一致，展示效果理論上應(yīng)該是最好的。
• ???Huawei P30??? 屏幕寬??360px???，??dpr = 3???、??initial-scale= 0.3??? 時(shí)，??clientWidth??? 變?yōu)??1080px???，根元素??fontSize = 144px???，那么??0.01rem = 1.44px???。其實(shí)這個(gè)時(shí)候我們實(shí)現(xiàn)的已經(jīng)大于??1px?? 了。相當(dāng)于大于1個(gè)物理像素來渲染。

兩種方式效果展示都比較好，說明在此方案下，我們可以直接寫 ??1px??? 或者 ??0.01rem?? 都是可以的。

一些手機(jī)的屏幕分辨率整理

總結(jié)

移動(dòng)端適配主要就分為兩方面，一方面要適配不同機(jī)型的屏幕尺寸，一方面是對(duì)細(xì)節(jié)像素的處理過程。如果你在項(xiàng)目中直接寫了 ??1px?? ，由于 dpr 的存在展示導(dǎo)致渲染偏粗，其實(shí)是不符合設(shè)計(jì)稿的要求。

如果你使用了 rem 布局計(jì)算出了對(duì)應(yīng)的小數(shù)值，不同手機(jī)又有明顯的兼容性問題。此時(shí)老項(xiàng)目的話整體修改 ??viewport??? 成本過高，可以采用第一種實(shí)現(xiàn)方案進(jìn)行 ??1px??? 的處理；新項(xiàng)目的話可以采用動(dòng)態(tài)設(shè)置 ??viewport?? 的方式，一鍵解決所有適配問題。

其實(shí)移動(dòng)端對(duì) ??1px?? 的渲染適配實(shí)現(xiàn)起來配置簡(jiǎn)單、代碼簡(jiǎn)短，能夠快速上手。但文本通過大量篇幅去闡述其原理，旨在能夠?qū)ζ湔嬲斫獠氐捉饣?，希望能夠?qū)Υ蠹矣兴鶐椭?/p>
本文名稱：為什么會(huì)存在 1px 問題？怎么解決？
當(dāng)前URL：http://m.5511xx.com/article/dpicohg.html