移動(dòng)端流體布局的一種布局方法

李春鵬 李金友

【摘 要】流體布局在現(xiàn)在的網(wǎng)頁顯示中越來越得到廣泛的普及應(yīng)用，這也是在現(xiàn)代網(wǎng)站開發(fā)中所必須要考慮的問題，一個(gè)好的網(wǎng)站應(yīng)該能夠在多種終端上進(jìn)行顯示，如何協(xié)調(diào)好流動(dòng)布局與固定寬度布局的轉(zhuǎn)換是現(xiàn)在網(wǎng)站開發(fā)中必須解決的技術(shù)問題，本文就流動(dòng)布局的布局方式，進(jìn)行了簡單的闡述，僅供大家借鑒和商祺。

【關(guān)鍵詞】移動(dòng)端；流體布局

一、PPI和DPI兩種單位

屏幕像素密度ppi：是英文Pixels Per Inch的縮寫，屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量，即屏幕像素密度。I是英文Pixels Per Inch的縮寫，意為像素每英寸。英寸是常用的長度單位，大約相當(dāng)于2.54厘米。而像素是專用于熒幕的概念，指的是熒幕可以解析的最小的點(diǎn)。因此，PPI值得是像素在熒幕上的密度，PPI越高圖像就越清晰。舉例來說，如果電腦屏幕是2K分辨率，即1920×1080像素，它的圖像寬為1920像素。而如果這個(gè)電腦屏幕的物理寬度是19.2英寸，電腦屏幕是分辨率就是1920/19.2=100PPI。

DPI是英文Dots Per Inch的縮寫，意為點(diǎn)每英寸?？梢园袲ot理解為取樣點(diǎn)，即物理設(shè)備可以解析的最小單位。在印刷時(shí)，它就可以作為印刷網(wǎng)點(diǎn)，而在鼠標(biāo)等電子設(shè)備上，可以理解為最小操作閾值（即設(shè)備會(huì)把多么遠(yuǎn)的兩個(gè)點(diǎn)當(dāng)作一個(gè)點(diǎn)來處理）。仍然拿1920×1080像素的圖片來舉例子，如果印刷設(shè)備的解析能力剛好是100DPI，而且你要印制的紙張尺寸剛好是19.2英寸，那么印刷設(shè)備就可以剛好把一個(gè)像素作為一個(gè)取樣點(diǎn)，印刷完成后圖片的保真度是百分之百。在大多數(shù)情況下，這幾個(gè)數(shù)值都不那么整好，因此保真度會(huì)產(chǎn)生損失。

二、css中px、em和rem三種單位

國內(nèi)的網(wǎng)站開發(fā)者們大都喜歡用px作為編輯網(wǎng)書寫的邏輯單位，而國外的網(wǎng)站大都喜歡用em和rem，三者的區(qū)別為：

1.PX長度單位

IE無法調(diào)整那些使用px作為單位的字體大??；

國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位；

Firefox能夠調(diào)整px和em，rem，但是有大部分的國產(chǎn)瀏覽器使用IE內(nèi)核。

px像素（Pixel）。相對(duì)長度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。（引自CSS2.0手冊(cè)），px單位，具有絕對(duì)特性，與分辨率掛鉤。

2.em是相對(duì)長度單位

相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。任意瀏覽器的默認(rèn)字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合： 1em=16px。那么12px=0.75em，10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px， 這樣12px=1.2em， 10px=1em， 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。em會(huì)繼承父級(jí)元素的字體大小。所以我們?cè)趯慍SS的時(shí)候，需要注意兩點(diǎn)：

1） body選擇器中聲明Font-size=62.5%；

2） 將你的原來的px數(shù)值除以10，然后換上em作為單位；

3） 重新計(jì)算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明。

簡單的理解em就是一種相對(duì)單位，與之大學(xué)掛鉤，會(huì)根據(jù)字體大小而改變自己的大小，在設(shè)計(jì)流體網(wǎng)頁中靈活性非常高。

3.rem長度單位

rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡單，就是多寫一個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。Rem與根元素的字號(hào)掛鉤。

三、移動(dòng)端的邏輯分辨率

移動(dòng)端的分辨率一般最小不會(huì)小于320像素，最大不超過640像素。這里所說的分辨率是邏輯分辨率，而不是通常所說的手機(jī)分比率。比如iphone6 plus的分辨率為：1080*1920（有一些設(shè)計(jì)者稱實(shí)際分辨率：1242*2208），而它的邏輯分辨率為：414*736。沒有超過640，通過頁面縮放技術(shù)進(jìn)行縮小而不會(huì)失真。而如果是ipad，分辨率為：1563*2048，而它的邏輯分辨率則為768*1024，所以，如果設(shè)置640的頁面，會(huì)在豎屏出現(xiàn)白邊。所以我們制作網(wǎng)頁是要充分考慮到不同的移動(dòng)終端，設(shè)計(jì)不同的顯示比例。才能使我們所設(shè)計(jì)的網(wǎng)頁在多種移動(dòng)端顯示時(shí)，不會(huì)顯示失真。

其次，常見的流體布局一般分兩種，一種是全屏流體設(shè)計(jì)，另一種是固屏流體設(shè)計(jì)。

四、開發(fā)移動(dòng)流體網(wǎng)站所具備必要的知識(shí)

做移動(dòng)站有一個(gè)必要的知識(shí)，就是關(guān)于屏幕寬度以及縮放問題。我們習(xí)慣的在標(biāo)簽之間增加一個(gè)標(biāo)簽：

//窗口設(shè)定

Name=”viewport”

//頁面大小屏幕等寬

Width=device-width

//初始縮放比例，1.0表示原始比例大小

Initial-scale=1.0

//允許縮放的最小比例

minimum-scale=1.0

//允許縮放的最大比例

maximum-scale=1.0

//用戶是否可以縮放，這里no表示不可以

user-scalable=no

上面最大最小比例其實(shí)就已經(jīng)限制了無法縮放了，和最后一個(gè)是否可以縮放有同樣的功能。

因?yàn)椴煌氖謾C(jī)，分辨率都不同，圖片一定要能夠自適應(yīng)等比例縮放，才能保證布局的正確性。

//設(shè)置max-width后，圖片才開始自適應(yīng)

img{

display：block；

max-width：100%；

}

第五.媒體查詢顯示設(shè)計(jì)

在大于480小于640之間的顯示設(shè)計(jì)方法為：

@media （min-width ：480px） and （max-width：640px）{

字號(hào)調(diào)試顯示合適為止

{

媒體查詢小于480設(shè)計(jì)方法：

@media （max-width ：480px） {

字號(hào)調(diào)試顯示合適為止

}

通過在css樣式表中加入以上代碼，就可以有效的控制頁面在不同媒體上的完整顯示

總之，對(duì)初學(xué)者來說，一定要弄清楚一些流體布局的一些基本概念，多多動(dòng)手實(shí)踐，多看別人開發(fā)的網(wǎng)站，進(jìn)行模擬、總結(jié)，從簡單入手，逐步深入，相信大家經(jīng)過一段時(shí)間的訓(xùn)練，都能成為流體布局的高手。

【參考文獻(xiàn)】

[1]HTML5基礎(chǔ)知識(shí) 核心技術(shù)與前沿案例，人民郵電出版社，2016.10.

[2]html5+css3從入門到精通 web前端開發(fā) 吉林大學(xué)出版社 2017.11.

[3]HTML5第一季視頻教程 北風(fēng)網(wǎng) 2015.1.