欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

像素密度與CSS3的viewport在移動端Web響應(yīng)式布局中的運(yùn)用

segmentfault   發(fā)布時間:2016-05-27 11:49:50   作者:Murphywuwu   我要評論
viewport是CSS3中調(diào)整縮放的利器,特別適用于移動端Web界面的操作與布局,接下來我們就來詳解像素密度與CSS3的viewport在移動端web響應(yīng)式布局中的運(yùn)用.

何謂 viewport
根據(jù) w3c 對于 CSS Device Adaptation 的解釋,他大致上是在做這些事情,
1.根據(jù)裝置的顯示區(qū)域來展示文件
2.放大或縮小文件,來符合或設(shè)定上給予裝置的可視區(qū)域
3.允許設(shè)定或初始化縮放的級別,或是其他規(guī)則
實(shí)際上,他是跟著顯示裝置在運(yùn)作的,所以他的所有設(shè)定都跟顯示裝置有關(guān),而這里的顯示裝置跟 Media Query 里面的 screen, projection, print, tv, tty, aural, handheld, embossed, braille 這幾樣?xùn)|西是不太一樣的(話說,我上次的文章似乎沒提到這一塊)。 雖然,Media Query 上述那幾項(xiàng)規(guī)則設(shè)定,很明顯都與其顯示的裝置有關(guān),但是,他們的目的不同,操作的方式也不一樣。
歐,你說 print 為什么也算顯示裝置,因?yàn)閷Υ蛴C(jī)而言,印出來也是顯示的一種(但是印出來有 @page 可以用喔!

@viewport vs. @media

CSS Code復(fù)制內(nèi)容到剪貼板
  1. 舉個例子來說,   
  2. @viewport {   
  3.     width: device-width;   
  4.     initial-scale: 1;   
  5. }   
  6.   
  7. @media screen and (min-width768px) {   
  8.     h1 {   
  9.         font-size16px;   
  10.     }   
  11. }   
  12. @media screen and (max-width768px) {   
  13.     h1 {   
  14.         font-size26px;   
  15.     }   
  16. }  

上面那個 @viewport 與 @media 初始化設(shè)定中是無關(guān)的。這樣理解嗎?什么?不行?那先看一下步驟,
1.viewport 規(guī)則套用,寬度設(shè)定為 device-width,且初始縮放數(shù)值為 1
2.@media 套用于 screen 與其條件 (min-width: 768px)
3.@media 套用于 screen 與其條件 (max-width: 768px)
對于我們的視角來說,device-width 可以解釋為我們所看見的裝置的寬度,而 768px 這件事情,則是告訴該顯示的本文遇到這個條件時,應(yīng)該要顯示的結(jié)果。所以,條件會顯示的結(jié)果是看 @media 來決定。舉個例子來解釋這個例子,
1.假設(shè)我們的裝置 device-width 是 800px
2.那么第一個條件會成立
疑?無法理解?

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @viewport {   
  2.     width768px;   
  3. }   
  4.   
  5. @media only screen and (width768px) {   
  6.     h1 {   
  7.         font-size16px;   
  8.     }   
  9. }   
  10.   
  11. @media only screen and (width1200px) {   
  12.     h1 {   
  13.         font-size26px;   
  14.     }   
  15. }  

那這樣應(yīng)該相當(dāng)好理解了吧!這就是 @viewport 在做的事情,另外,由于 @viewport 有絕對優(yōu)先權(quán),所以他會比 @media 還要早執(zhí)行,所以就算這樣寫,也是會成立的,

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @media only screen and (width768px) {   
  2.     h1 {   
  3.         font-size16px;   
  4.     }   
  5. }   
  6.   
  7. @media only screen and (width1200px) {   
  8.     h1 {   
  9.         font-size26px;   
  10.     }   
  11. }   
  12.   
  13. @viewport {   
  14.     width768px;   
  15. }  

實(shí)例
首先舉個例子,iphone6s的像素分辨率為1334x750,326ppi,4.7英寸。如圖
下面我們一個一個來解釋。
2016527114141307.png (662×624)

像素密度
A.定義
326ppi代表的就是像素密度(pixels per inch),指的是每英寸的長度上排列的像素點(diǎn)數(shù)量。
a.屏幕分辨率
首先1334x750,代表的是屏幕分辨率,也就是說iPhone6s的屏幕是由縱向像素1334*橫向像素750個像素點(diǎn)組成。單位pixel。
b.物理尺寸
如圖可以知道,4.7英寸也就指的是iPhone6s屏幕對角線的物理長度。1英寸是一個固定長度,等于2.54厘米。

B.像素密度的計算
像素密度=對角線分辨率/屏幕尺寸。如下
計算:勾股定理算出對角線的分辨率:√(1334²+750²)
對角線分辨率除以屏幕尺寸:√(1334²+750²)/4.7≈440dpi。

C.直觀感受理解像素密度
像素密度越高,代表屏幕顯示效果越精細(xì)。Retina屏比普通屏清晰很多,就是因?yàn)镽etina屏幕像素密度高。最明顯的就是iPhone 3GS和iPhone 4的區(qū)別。屏幕尺寸一樣因?yàn)槠聊环直媛氏嗖钜槐端云聊幌袼孛芏纫蚕嗖钜槐丁o@示效果如下
2016527114212136.jpg (744×656)

如圖看出iPhone4顯示要比iPhone 3gs清晰的多。根本原因是因?yàn)閕Phone3gs的1個像素點(diǎn)的大小相對于iPhone4來說等于它屏幕的4個(2x2)像素大小。如下圖。
2016527114253505.png (800×329)

注意注意注意:這里的1像素指的是物理設(shè)備的1個像素點(diǎn)。也就是說不同像素密度的物理設(shè)備的一個像素點(diǎn)的大小是不一樣的。也就意味著對于物理設(shè)備屏幕的單個像素點(diǎn)的大小是不是一個固定的大小。用稍微專業(yè)一點(diǎn)的話來說就是,單個的設(shè)備像素的大小是不定的。

重要概念理解
上面我們討論的是關(guān)于物理設(shè)備的像素密度(再次強(qiáng)調(diào):這里的像素就是物理像素或者說是設(shè)備像素,對應(yīng)于像素密度不同的設(shè)備具體像素點(diǎn)的大小都是不一樣大的。像素密度越大,像素點(diǎn)越小,顯示的細(xì)節(jié)就越多越豐富。反之則情況剛好相反)。那么接下來我們要說的幾個重要概念是什么呢?我們先從css像素與設(shè)備像素開始討論。
A.css像素和設(shè)備像素
首先我們需要明確一點(diǎn):在我們編寫CSS的時候的px和設(shè)備自身的px是沒有任何關(guān)系的。
css pixel:瀏覽器使用的抽象單位,主要用來在網(wǎng)頁上繪制內(nèi)容。
device pixel:顯示屏幕的最小物理單位,每個dp包含自己的顏色、亮度。
既然css pixel與device pixel沒有任何關(guān)系,那么我們在編寫頁面時怎么設(shè)置多寬(用多少的css像素)的網(wǎng)頁才能適配不同的設(shè)備(才能覆蓋設(shè)備的像素)呢???為了解決這個問題,我們再引入一個重要的概念viewport。

B.viewport
viewport翻譯過來就是視口的意思。viewport有兩種,一種是layout viewport,還有一種是visual viewport。這兩種viewport的大小都是以css像素進(jìn)行繪制的。
1.layout viewport:把layout viewport想象成為不會變更大小和形狀的大圖。現(xiàn)在想像你有一個小一些的框架,你通過它來看這張大圖。(可以理解為「管中窺豹」)這個小框架的周圍被不透明的材料所環(huán)繞,這掩蓋了你所有的視線,只留這張大圖的一部分給你。你通過這個框架所能看到的大圖的部分就是visual viewport。當(dāng)你保持框架(縮?。﹣砜凑麄€圖片的時候,你可以不用管大圖,或者你可以靠近一些(放大)只看局部。你也可以改變框架的方向,但是大圖(layout viewport)的大小和形狀永遠(yuǎn)不會變。
計算:document.documentElement.clientWidth/Height
2.visual viewport:是頁面當(dāng)前顯示在屏幕上的部分。用戶可以通過滾動來改變他所看到的頁面的部分,或者通過縮放來改變visual viewport的大小。
計算:window.innerWidth/Height
當(dāng)你縮小或者放大頁面時,visual viewport的大小會發(fā)生變化。當(dāng)你放大頁面,能看到頁面的內(nèi)容也就越少,當(dāng)你縮小頁面能看到的頁面內(nèi)容也就越多。根本上是因?yàn)楫?dāng)你縮小或者放大網(wǎng)頁時,網(wǎng)頁上的css像素就變小或者變大了,但是layout viewport的大小是不變的。也就意味著,當(dāng)css像素變大時,layout viewport中能容納的單位css像素也就變少了,因此visual viewport的大小就變小了。反之也是一個道理。這個過程中,layout viewport并不會發(fā)生任何變化(當(dāng)然,在窗口的大小發(fā)生變化的時候,layout viewport的大小也會隨之變化,窗口越大能夠容納的CSS像素越多,layout viewport也就越大,反之亦然)。如圖
2016527114319744.png (800×418)

1:1
2016527114334065.jpg (800×442)

1:1.3
因此可以把layout viewport想象成為一個虛擬的"窗口"。窗口可大于或小于設(shè)備的可視區(qū)域(也就是visual viewport),一般設(shè)備默認(rèn)layout viewport大于visual viewport。這樣不會破壞沒有針對設(shè)備的瀏覽器優(yōu)化的網(wǎng)頁的布局,用戶可以通過平移和縮放來看網(wǎng)頁的其他部分。
部分機(jī)型默認(rèn)layout viewport:
2016527114354943.png (800×132)

你也可以通過上面給出的document.documentElement.clientWidth/Height在chrome控制臺中進(jìn)行測試layout viewport的大小。

C.小總結(jié)1
根據(jù)以上的討論我們知道了:
我們寫頁面時是在layout viewport上進(jìn)行的布局,用的是css像素,可以由document.documentElement.clientWidth/Height計算。(與程序員相關(guān))
各種設(shè)備的屏幕分辨率表示的像素是設(shè)備像素可以由screen.width/height計算。(與硬件產(chǎn)品相關(guān))
我們觀看頁面時是通過visual viewport進(jìn)行觀看的,用的也是css像素,可以由window.innerWidth/Height來計算。(與用戶行為相關(guān))
設(shè)置layout viewport大小
通過上面的討論,我們知道,屏幕的分辨率的設(shè)備像素與我們編寫頁面時使用的CSS像素并沒有什么直接關(guān)系。而且
問題1.從大的方面來看:首先,我們編寫的CSS是在layout viewport中繪制。其次,從下圖可以看出,設(shè)備分辨率和layout viewport也沒有什么直接關(guān)系
問題2.從小的方面來看:首先, CSS像素在不放大和縮小的情況下,在任何設(shè)備中的1個CSS像素都是一樣大的。其次,不同像素密度的設(shè)備,設(shè)備屏幕(與像素密度有關(guān))中的1個設(shè)備像素的大小是各不相同的。可以知道,在沒有進(jìn)行任何設(shè)置的情況下,單位設(shè)備像素與單位css像素也扯不上什么關(guān)系。
2016527114413968.png (800×429)

設(shè)置viewport
如果我們想要自己寫出來的頁面在各個設(shè)備下都工作良好,就會出現(xiàn)困難?因此為了讓他們之間扯上關(guān)系,我們便需要做一些設(shè)置。像下面這樣

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">  

每個設(shè)置對應(yīng)的意思
2016527114432769.png (800×323)

這樣設(shè)置了之后,我們的layout viewport的大小也就與設(shè)備大小相等了(高度上也是相等的)。如圖。既然它們相等那么可以推理得出此時的單位設(shè)備像素和單位CSS像素在縮放比例為1的情況下,也就是相等的了。
這時候我們顯示的頁面的屏幕和我們布局頁面的大小是一樣的,那么在進(jìn)行布局的時候,也就容易了很多。
2016527114450091.png (800×440)

小總結(jié)2:
知道了這樣設(shè)置后,對于我們布局來說問題也就不大了。
1.我們在layout viewport上布局,這樣設(shè)置后,layout viewport的大小等于設(shè)備屏幕的大小
2.不同像素密度的設(shè)備的單位設(shè)備像素大小的變化也就會同步引起單位CSS像素大小的變化。也就是說,我們在用CSS編寫網(wǎng)頁的時候,在不同像素密度的設(shè)備中的css像素大小是不一樣的是變化的。(這里一定要理解)。
但是,這里還有一個問題,iphone6 plus 414這個寬度是從哪里來的呢?

像素密度與轉(zhuǎn)換系數(shù)
Android和IOS都會通過轉(zhuǎn)換系數(shù)讓控件適應(yīng)屏幕的尺寸。而這個轉(zhuǎn)換系數(shù)就和最開始講的像素密度PPI有關(guān)。不同的PPI轉(zhuǎn)化系數(shù)不同。如圖
2016527114508545.jpg (650×305)

由圖可以知道iphone6 plus的屏幕分辨率為1242*2208,轉(zhuǎn)化系數(shù)為3。
1242/3=414。
414便由此而得,這是設(shè)備自身進(jìn)行的轉(zhuǎn)化,而我們設(shè)置的layout viewport的大小也就等于設(shè)備自身轉(zhuǎn)換后的大小。

相關(guān)文章

最新評論