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

資訊專欄INFORMATION COLUMN

【移動適配】一個像素的border怎么實現

SoapEye / 1304人閱讀

摘要:根據上面的圖片,安卓手機,屬于,轉換系數是因此這臺手機中,個像素物理像素。這個轉換系數,也等同于,設備像素比。


一個像素里復雜紛擾的世界

文 | 啃先生 Mar.3rd.2016 首發于微信公眾號(啃先生)

上一篇發了《【移動適配】移動Web怎么做屏幕適配》,現在繼續。

壹 | Fisrt

在CSS的世界里Px是原子操作,我們無法定義邊框的寬度是0.5px,最小都是1px。所以有以下結論:

然而,對于精益求精的產品而言,這種認識只是片面的!例如:我做了一個頁面,上面只有兩條邊框,在高清屏(如iPhone5s)上,經過特殊處理的邊框比1像素的邊框還要細。

因此,在高清屏上,border-width:1px;并不是最小邊框。瀏覽器可以顯示的最小粒度比CSS中的1px還要小。

貳 | Second

那么CSS中的1px是什么?瀏覽器是怎么渲染它的?

網頁在一個叫viewport的東西里渲染,可以理解為畫布,畫布被分成 N x M 個小方格,1個CSS像素,就是其中的一個小方格。

viewport又是什么?

網頁在viewport上渲染,可以想像在PS上畫東西時,上面也有個畫布,這個畫布分割了 N x M 個方格,N是它的寬度,M是它的高度。寬高都可以任意設置,所以說viewport是虛擬的。假設設置寬度是400,那么瀏覽器顯示區域的橫向將被分為400份,CSS的1px占的寬度就是顯示區域的 1/400。如果是980,那就是1/980。

viewport值不一樣時,對頁面元素寬度的影響

看一個的頁面,不動任何其他代碼,只修改viewport的寬度,頁面發生了什么變化

代碼如下:

以下是運行結果


viewport=500的情況


viewport=900的情況

我們只分析用戶頭像的圖片,已知頭像寬度是50px。

當viewport寬度為500時,屏幕橫向被分為500份,每份1px,所以頭像寬度是屏幕的1/10。(500/50=10)

當viewport寬度為900時,屏幕橫向被分為900份,每份1px,所以頭像寬度是屏幕的1/8。 (900/50=18)

所以,在CSS中,1px是指viewport中的一個小方格,而viewport寬度是可以任意設置的。

叁 | Third

那么,怎么合理設置viewport的寬度?
viewport的寬度可以是數字和字符串"device-width"。device-width指設備寬度。

當取值為數字時,指不論是什么手機屏幕,viewport都被分為那么多份

當取值為device-width時,指的是手機屏幕的viewport寬度被設置為跟手機寬度一樣。那這個寬度怎么算的呢?

device-width的算法

先理清幾個非常關鍵的術語概念:

物理像素:買手機的時候會有一個 nm 的分辨率,那是屏幕的nm個呈像的點,一個點(小方格)為一個物理像素。它是屏幕能顯示的最小粒度

CSS像素:就是CSS里的Px,上面已經講了是viewport中的一個小方格。

像素密度:即dpi或ppi,屏幕每英寸所占的物理像素點。

而CSS像素與物理像素之間是有一個轉換關系的。即是:

其中,轉換系數計算過程如下:


安卓的密度區域和轉化系數的對應表


iPhone的密度區域和轉化系數的對應表
(聲明:以上三個圖片來源于 http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml)

例如:某臺安卓手機,分辨率是 1920*1080,屏幕對象線是5英寸。那么在這臺手機上1個CSS像素,占了多少個物理像素?

第一步:勾股定理算出對角線的分辨率,即 √(19202+10802)≈2203px

第二步:算出dpi。對角線的分辨率/對角線英寸 = 2203/5≈440dpi

第三步:得出轉換系數。根據上面的圖片,安卓手機440dpi,屬于XXHDPI,轉換系數是3

因此這臺手機中,1個CSS像素 = 3*物理像素。即1個CSS像素占了3個物理像素。

這個轉換系數,也等同于dpr,設備像素比。

因為很明顯device-width的寬度值單位是CSS像素。所以當viewport設置為device-width時,此時它是手機橫向分辨率 / 轉換系數。即:

例如上述的例子中,該臺安卓手機的device-width是1080/3 = 360,即viewport的寬度是 360 CSS像素。
而viewport設置為固定的數字有可能會破壞這種轉換關系,都是建議設置viewport寬度為device-width,這樣1個CSS像素就盡最大可能剛好占dpr個物理像素點。

肆 | Fourth

為什么會出現比border-width:1px更細的邊框?

屏幕能夠顯示的最小粒度是1個物理像素,而當viewport寬度設置為device-width時,1個CSS像素占用的物理像素是由轉換系數決定的。所以,像iPhone6這樣的高清屏上,轉換系數為3,border-width:1px,這個邊框占了3個物理像素。如果能讓某個border的寬度為1個物理像素,那么它就比1個CSS像素要細,而本文最開始邊框那個更細是因為經過特殊處理后使其只占用1個物理像素。

讓1個CSS像素占用一個物理像素的辦法。

方法一:viewport的scale

在viewport的屬性里,除了設置寬高的width和height外,還有縮放比例scale。
當scale為1時,頁面大小正常,但scale為0.5時,頁面被縮小了1倍,本來1個CSS像素寬度占2個物理像素寬度,縮小后的border-width:1px就只占1個物理像素。代碼如下:

其中,initial-scale為1/dpr。

優點:

不用為border寫很多樣式代碼,跟原來一樣border:1px solid #D5D5D6即可

可以輕松設置圓角 border-radius。

缺點:
整個頁面縮小了,副作用就是字體,圖片,其他元素的尺寸邊距等等都同比例縮小了。這種情況,設置viewport為dpr*document.documentElment.clientWidth,再結合我上一篇文章《【移動適配】移動Web怎么做屏幕適配(一)》,即可解決。

方法二:transform scale

方法一是縮放整個頁面,在CSS3標準里,可以縮放某個元素。例如某個div.border-top,為它設置如下樣式,使該DIV的頂部有一個邊框

.border-top{position: relative;border-top: none !important;}
.border-top:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #D5D5D6;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

在該DIV后面添加一個高度為1px的內容,并且縮小dpr倍,這里就是縮小成原來的1/2。
優點是整個頁面不用縮放,缺點是border代碼較多,無法實現border-radius圓角

寫完瀕臨虛脫。。

深入理解viewport和px(http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml)

A tale of two viewports(http://www.quirksmode.org/mobile/viewports.html)


適配的問題還沒講完,但又臭又長的純技術文太硬了,下期可能會喝點湯,講講故事。

開始碼字才知道碼字不易,堅持碼字更不易。轉載請聲明來源

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78820.html

相關文章

  • 移動適配一個像素border怎么實現

    摘要:根據上面的圖片,安卓手機,屬于,轉換系數是因此這臺手機中,個像素物理像素。這個轉換系數,也等同于,設備像素比。 showImg(https://segmentfault.com/img/bVtcMA);一個像素里復雜紛擾的世界 文 | 啃先生 Mar.3rd.2016 首發于微信公眾號(啃先生) 上一篇發了《【移動適配】移動Web怎么做屏幕適配》,現在繼續。 壹 | Fisrt 在...

    junnplus 評論0 收藏0
  • 移動適配移動Web怎么做屏幕適配(三)

    摘要:復雜紛擾的世界背后,總會有萬變不離其宗的簡單規則文啃先生壹前面寫了兩篇移動適配相關的文章移動怎么做屏幕適配一重點介紹了怎樣利于來處理尺寸等等相關的適配。所以到目前為止我所整理出來的三篇文章,是移動適配知識中非常重要的基礎知識。 showImg(https://segmentfault.com/img/bVti5j);復雜紛擾的世界背后,總會有萬變不離其宗的簡單規則 文 | 啃先生 Ma...

    jonh_felix 評論0 收藏0
  • 移動適配移動Web怎么做屏幕適配(三)

    摘要:復雜紛擾的世界背后,總會有萬變不離其宗的簡單規則文啃先生壹前面寫了兩篇移動適配相關的文章移動怎么做屏幕適配一重點介紹了怎樣利于來處理尺寸等等相關的適配。所以到目前為止我所整理出來的三篇文章,是移動適配知識中非常重要的基礎知識。 showImg(https://segmentfault.com/img/bVti5j);復雜紛擾的世界背后,總會有萬變不離其宗的簡單規則 文 | 啃先生 Ma...

    LiuRhoRamen 評論0 收藏0

發表評論

0條評論

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