Q. 什麼是液態版型?

網頁設計的版型技術歷經了一些過程,其中一種就是液態版型,讓我們很快的回顧一下網頁的版型類型:

 

固定網頁版型(Static)

古早的網頁設計,用戶的螢幕顯示寬度必須要配合網站,許多網站底下都會寫著「建議顯示器解析度於1024」否則不保證顯示正確,就是這個原因。用戶使用電腦上網大多不會出現問題,但使用智慧手機問題就來了。

如果用手機觀看固定網頁版型,結果就是內容會被硬生生的切掉,用戶必須要用手機的捲軸界面觀看左右被切除的內容,十分麻煩。

 

液態網頁版型(Liquid)

可以根據網頁的寬度改變顯示的網頁內容的寬度,最常見情況是版面與文字不會超出螢幕的寬度,而是會自動調整行數讓內容可以正常顯示。

但網頁版型的設計外觀結構仍無法根據裝置的寬度改變,就像是畫面被壓縮一樣,所以顯示的內容可能在行動裝置上仍無法理想呈現。例如網站為了正確顯示內容導致行數過多的情況。

 

適應網頁版型(Adaptive)

版型的設計結構已經可以根據裝置的寬度改變,是網頁設計的一大革新。舉例來說,原本左右並排的網頁內容,遇到手機裝置就會變成直式顯示,已經算是響應是網頁設計的雛型。

但,並不像是液態板型會自動改變網頁的寬度,適應網頁版型遇到了設計師沒有定義的裝置寬度就會無法對應的問題。舉例來說,版面需要500px才能正確顯示,手機只有400px的寬度,即使運用適應網頁設計技術,仍有100px會無法正確顯示。


響應網頁版型(Responsive)

響應網頁版型簡稱RWD,也有人稱為自適網頁設計。RWD結合了液態網頁的與適應網頁的設計概念,可以根據用戶的裝置螢幕寬度改變版型的尺寸,並根據裝置寬度自行改變版型,是當今最主流的網頁設計技術。

 

這也就是今日已經沒有人說「液態網頁」或「適應網頁」了,因為技術已經被整合入RWD內。