響應式網頁設計初探

標籤：sel   參考   協助   簡單   針對   enum   預設   高度   cal   

我首次接觸響應式網頁設計還要從應用bootstrap說起。我們運用bootstrap的網格類簡單的將響應式設計帶入我們的網頁設計當中，當然bootstrap架構其實還做了其他事情以支援網頁響應式設計。現在，就讓我們一窺響應式網頁設計背後的原理。

實現響應式設計的前提:允許網頁縮放

<meta name="viewport" content="width=device-width, init-scale=1.0">

視口的 meta 標籤，重寫了預設的視口，並協助載入與特定視口相關的樣式。

width 屬性設定螢幕寬度。它包含一個值，比如 320，表示 320 像素，或者值為 ‘device-width‘，用來告訴瀏覽器使用原始的解析度。

initial-scale 屬性是視口最初的比例。當設定為 1.0 時，將呈現裝置的原始寬度。

 

實現響應式設計的核心：CSS3的媒體查詢

自動探測螢幕寬度，選擇載入相應的CSS檔案。

常用於布局的CSS Media Queries有以下幾種

裝置類型(media type):

all所有裝置
screen 電腦顯示器
print列印用紙或預覽列印視圖
handheld可攜式裝置
tv電視機類型的裝置
speech語意和音頻盒成器
braille盲人用點字法觸覺回饋裝置
embossed盲文印表機
projection各種投影裝置
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端

裝置特性(media feature):

width瀏覽器寬度
height瀏覽器高度
device-width裝置螢幕解析度的寬度值
device-height裝置螢幕解析度的高度值
orientation瀏覽器視窗的方向縱向還是橫向，當視窗的高度值大於等於寬度時該特性值為portrait，否則為landscape
aspect-ratio比例值，瀏覽器的縱橫比
device-aspect-ratio比例值，螢幕的縱橫比

example:

1. /* for 240 px width screen */
2. @media only screen and (max-device-width:240px){
3. selector{ ... }
4. }

1. /* for 320px width screen */
2. @media only screen and (min-device-width:241px) and (max-device-width:320px){
3. selector{ ... }
4. }

1. /* for 480 px width screen */
2. @media only screen (min-device-width:321px)and (max-device-width:480px){
3. selector{ ... }
4. }

 

其他知識

1 CSS 不使用絕對寬度，而用百分比寬度

.p {width:80%}

2 字型不使用px為單位，改用em單位

3 針對不同寬度的裝置，實現圖片的自適應載入

 

參考串連：

1.https://isux.tencent.com/responsive-web-design.html

2.http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

3.http://www.runoob.com/bootstrap/bootstrap-v2-responsive-design.html

 

響應式網頁設計初探