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

李春鵬 李金友

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

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

一、PPI和DPI兩種單位

屏幕像素密度ppi：是英文Pixels Per Inch的縮寫，屏幕上每英寸可以顯示的像素點的數量，即屏幕像素密度。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英寸，那么印刷設備就可以剛好把一個像素作為一個取樣點，印刷完成后圖片的保真度是百分之百。在大多數情況下，這幾個數值都不那么整好，因此保真度會產生損失。

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

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

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值變為 16px*62.5%=10px， 這樣12px=1.2em， 10px=1em， 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。em會繼承父級元素的字體大小。所以我們在寫CSS的時候，需要注意兩點：

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

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

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

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

3.rem長度單位

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

三、移動端的邏輯分辨率

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

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

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

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

//窗口設定

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樣式表中加入以上代碼，就可以有效的控制頁面在不同媒體上的完整顯示

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

【參考文獻】

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

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

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