移動端流體布局的一種布局方法

李春鵬 李金友

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

【關鍵詞】移動端；流體布局

一、PPI和DPI兩種單位

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

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

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

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

1.PX長度單位

IE無法調整那些使用px作為單位的字體大小；

國外的大部分網站能夠調整的原因在于其使用了em或rem作為字體單位；

Firefox能夠調整px和em，rem，但是有大部分的國產瀏覽器使用IE內核。

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

2.em是相對長度單位

相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合： 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會繼承父級元素的字體大小。所以我們在寫CSS的時候，需要注意兩點：

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

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

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

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

3.rem長度單位

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

三、移動端的邏輯分辨率

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

其次，常見的流體布局一般分兩種，一種是全屏流體設計，另一種是固屏流體設計。

四、開發(fā)移動流體網站所具備必要的知識

做移動站有一個必要的知識，就是關于屏幕寬度以及縮放問題。我們習慣的在標簽之間增加一個標簽：

//窗口設定

Name=”viewport”

//頁面大小屏幕等寬

Width=device-width

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

Initial-scale=1.0

//允許縮放的最小比例

minimum-scale=1.0

//允許縮放的最大比例

maximum-scale=1.0

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

user-scalable=no

上面最大最小比例其實就已經限制了無法縮放了，和最后一個是否可以縮放有同樣的功能。

因為不同的手機，分辨率都不同，圖片一定要能夠自適應等比例縮放，才能保證布局的正確性。

//設置max-width后，圖片才開始自適應

img{

display：block；

max-width：100%；

}

第五.媒體查詢顯示設計

在大于480小于640之間的顯示設計方法為：

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

字號調試顯示合適為止

{

媒體查詢小于480設計方法：

@media （max-width ：480px） {

字號調試顯示合適為止

}

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

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

【參考文獻】

[1]HTML5基礎知識 核心技術與前沿案例，人民郵電出版社，2016.10.

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

[3]HTML5第一季視頻教程 北風網 2015.1.