(給前端大全加星標(biāo)，提升前端技能)

作者：?大轉(zhuǎn)轉(zhuǎn)FE/李興瑞

1px線變粗的原因

在做移動(dòng)端項(xiàng)目時(shí)，常常是根據(jù)設(shè)計(jì)圖設(shè)置元素節(jié)點(diǎn)的大小和樣式，但是有時(shí)候根據(jù)設(shè)計(jì)圖寫出來(lái)的樣式還是不如人意，雖然表面上看起來(lái)和設(shè)計(jì)稿是一樣的，可是就是沒(méi)設(shè)計(jì)稿那種感覺(jué)，而且莫名還有一種山寨的氣息，UI審查的時(shí)候也常常會(huì)覺(jué)得分割線或則邊框線太粗了，要更細(xì)一點(diǎn)，但是一看代碼，已經(jīng)是1px了，為什么看著還是那么粗呢？

要知道問(wèn)題的原因首先要了解一下幾個(gè)概念：

(1)物理像素(physical pixel)

一個(gè)物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元(像素顆粒)，在操作系統(tǒng)的調(diào)度下，每一個(gè)設(shè)備像素都有自己的顏色值和亮度值。 如：iPhone6上就有750*1334個(gè)物理像素顆粒。

(2)設(shè)備獨(dú)立像素(density-independent pixel)

設(shè)備獨(dú)立像素(也叫密度無(wú)關(guān)像素)，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中得一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如：css像素)，有時(shí)我們也說(shuō)成是邏輯像素。然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。所以說(shuō)，物理像素和設(shè)備獨(dú)立像素之間存在著一定的對(duì)應(yīng)關(guān)系，這就是接下來(lái)要說(shuō)的設(shè)備像素比。

(3)設(shè)備像素比(device pixel ratio )簡(jiǎn)稱dpr

設(shè)備像素比(簡(jiǎn)稱dpr)定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系。它的值可以按如下的公式的得到：

設(shè)備像素比(dpr)=物理像素/邏輯像素(px)?// 在某一方向上，x方向或者y方向，下圖dpr=2

知道了設(shè)備像素比，我們就大概知道了1px線變粗的原因。簡(jiǎn)單來(lái)說(shuō)就是手機(jī)屏幕分辨率越來(lái)越高了，同樣大小的一個(gè)手機(jī)，它的實(shí)際物理像素?cái)?shù)更多了。因?yàn)椴煌囊苿?dòng)設(shè)備有不同的像素密度，所以我們所寫的1px在不同的移動(dòng)設(shè)備上等于這個(gè)移動(dòng)設(shè)備的1px。現(xiàn)在做移動(dòng)端開(kāi)發(fā)時(shí)一般都要加上一句話：

name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

這句話定義了本頁(yè)面的viewport的寬度為設(shè)備寬度，初始縮放值和最大縮放值都為1，并禁止了用戶縮放。

viewport的設(shè)置和屏幕物理分辨率是按比例而不是相同的，移動(dòng)端window對(duì)象有個(gè)devicePixelRatio屬性，它表示設(shè)備物理像素和css像素的比例，在retina屏的iphone手機(jī)上，這個(gè)值為2或3, css里寫的1px長(zhǎng)度映射到物理像素上就有2px或3px。通過(guò)設(shè)置viewport，可以改變css中的1px用多少物理像素來(lái)渲染，設(shè)置了不同的viewport，當(dāng)然1px的線條看起來(lái)粗細(xì)不一致。

1px線變粗的解決方法

偽類 + scale

這種方法的原理就是把原來(lái)元素的border去掉，然后用 :before 或者 :after 重做 border ，原先的元素相對(duì)定位，新做的 border 絕對(duì)，定位使用 transform 的 scale 把線條高度縮小一半，新邊框就相當(dāng)于0.5px了。代碼如下：

.scale{

position: relative;

border:none;

}

.scale:after{

content: '';

position: absolute;

bottom: 0;

background: #000;

width: 100%;

height: 1px;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

}

使用flexible.js

前面已經(jīng)說(shuō)過(guò)1px變粗的原因就在于一刀切的設(shè)置viewport寬度，如果能把viewport寬度設(shè)置為實(shí)際的設(shè)備物理寬度，css里的1px不就等于實(shí)際1px長(zhǎng)了么。 flexible.js的原理就是這樣，先獲取設(shè)備縮放比devicePixelRatio，然后根據(jù)縮放比來(lái)動(dòng)態(tài)設(shè)定viewport的值，這樣導(dǎo)致的結(jié)果就是無(wú)論是哪個(gè)設(shè)備，1px所表示的永遠(yuǎn)是1個(gè)設(shè)備像素，即該設(shè)備的最小像素。

//devicePixelRatio=2時(shí)，輸出meta如下

"viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

//devicePixelRatio=3時(shí)，輸出meta如下

"viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

使用meta viewport控制

原理如上。代碼如下：

//1px像素線條

"viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

//0.5像素線條

"viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">

使用box-shadow模擬邊框

利用css 對(duì)陰影處理的方式實(shí)現(xiàn)0.5px的效果。代碼如下：

.box-shadow-1px {

box-shadow: inset 0px -1px 1px -1px #c8c7cc;

}

使用border-image

首先需要自己制作一個(gè)0.5像素的線條作為線條背景圖片。。代碼如下：

p{

border-width: 0 0 1px 0;

border-image: imageUrl 2 0 round;

}

利用背景漸變linear-gradient

利用linear-gradient利用背景圖片漸變，從有色到透明，默認(rèn)方向從上到下，從0deg到50%的地方顏色是邊框顏色，然后下邊一半顏色就是透明了。然后設(shè)置背景寬度100%，高度是1px，再去掉repeat，所以有顏色的就是0.5px的邊框。代碼如下：

.bg_border {

background-image: linear-gradient(0deg,black 50%,transparent 50%);

background-size: 100% 1px;

background-repeat: no-repeat;

}

推薦閱讀

(點(diǎn)擊標(biāo)題可跳轉(zhuǎn)閱讀)

看完這篇，你也可以實(shí)現(xiàn)一個(gè)360度全景插件

從 Mixin 到 HOC 再到 Hook

提高幸福感的 9 個(gè) CSS 技巧

覺(jué)得本文對(duì)你有幫助？請(qǐng)分享給更多人

關(guān)注「前端大全」加星標(biāo)，提升前端技能

好文章，我在看??

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的手机1像素线粗_关于移动端开发 1px 线的一些理解和解决办法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。