響應式網頁設計簡單入門

文章表達的中心思想就是最後的那句引用"最好的設計是儘可能少的設計"。最重要的是我意識到平時咱們都忽略了一個常識：一張未經加工的原始HTML文檔就已是響應式的了，根本不用什麼CSS media屬性或者指定不論什麼樣式。

經過查看HTML代碼發現做者果真留下了一些信息，因而在twitter上找到他表達了我對他的膜拜之情以及想把如此精華的文章翻譯成中文的意願。

做者很是爽快地答應了23333~~(X___X)~~。

因而就有了相同奇葩的中文版本號：媽逼的站點。原文的精髓可能由於我自身對這類表達的駕馭的不夠而丟失了一些。但多少仍是能夠方便嫌英文閱讀麻煩的同窗們圍觀的了。

 

固然以上全是扯淡。一如做者所指出的，至關諷刺。

回到正題。各類屏幕尺寸滿天飛的時代怎樣讓站點自適應的究極解決方式：響應式設計（Responsive Design）。

構造主要的HTML頁面

一個簡單的博客頁面

始終認爲再多口水都沒有一個生動鮮明的樣例來得實在，如下經過對一個普通HTML頁面的改造來體驗什麼是響應式設計及怎樣達到。

如下構造一個主要的HTML頁面，它包括站點導航菜單，正文，圖片。側邊欄。表格式的佈局以及頁腳信息。

是個很完整而中庸的佈局。差點兒是常見的博客版面。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

< html >      < head >          < title >              Responsive Design Example          < / title >          < meta http - equiv = "content-type" content = "text/html;charset=utf-8" / >          < link rel = "stylesheet" type = "text/css" href = "style.css" >      < / head >      < body >          < div id = "main" >              < nav >                  < ul >                      < li >                          < a href = "#" > Home < / a >                      < / li >                      < li >                          < a href = "#" > Articles < / a >                      < / li >                      < li >                          < a href = "#" > Gallery < / a >                      < / li >                      < li >                          < a href = "#" > Forum < / a >                      < / li >                      < li >                          < a href = "#" > About < / a >                      < / li >                  < / ul >              < / nav >              < aside >                  < ul >                      < li > < a href = "#subtitle1" > item1 < / a > < / li >                      < li > < a href = "#subtitle2" > item2 < / a > < / li >                      < li > < a href = "#subtitle3" > item3 < / a > < / li >                      < li > < a href = "#subtitle4" > item4 < / a > < / li >                      < li > < a href = "#subtitle5" > item5 < / a > < / li >                  < / ul >              < / aside >              < section class = "post" >                  < article >                      < h1 >                          Sample Title                      < / h1 >                        < p > < / p >                        < section class = "grid" >                          < div class = "item" >                              #1                          < / div >                          < div class = "item" >                              #2                          < / div >                          < div class = "item" >                              #3                          < / div >                      < / section >                      < p > < / p >                  < / article >              < / section >              < footer >                  < hr >                  < ul >                      < li > < small > Wayou & copy 2013 | < / small > < / li >                      < li > < small > < a href = "mailto:sample@somesite.com" > Contact < / a > < / small > < / li >                  < / ul >              < / footer >          < / div >      < / body > < / html >

 

文章內容填充

剩下文章部分需要填充點內容。正好MS Word有這樣一個產生隨機文章的彩蛋。

用法是新建一個word文件而後打開輸入" =rand(3,10) " 再回車。當中rand 函數接收兩個參數，第一個表示要產生多少個天然段。第二個表示每段多少行。

因此上面回車後咱們會獲得一篇由3個天然段組成的文章且每段有10行。

 

而後再另存爲網頁文件：

最後可以在瀏覽器中經過查看源代碼把包括內容的<p>標籤拷貝到咱們的代碼中就能夠。

同一時候這裏有一個專門產生填充內容的站點Fillerati。可以定義篇幅。做者信息。標題等。

固然以上兩種做法多少有點裝逼與作做的感受。你全然可以隨便複製點什麼東西來做爲內容填充的 一_一|||。

填充內容後HTML變成這樣

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

< section class = "post" >      < article >          < h1 >              Sample Title          < / h1 >          < p >              Video provides a powerful way to help you prove your point . When you click Online              Video , you can paste in the embed code for the video you want to add . You can also              type a keyword to search online for the video that best fits your document . To make              your document look professionally produced , Word provides header , footer , cover page ,              and text box designs that complement each other . For example , you can add a matching              cover page , header , and sidebar . Click Insert and then choose the elements you want              from the different galleries . Themes and styles also help keep your document coordinated .              When you click Design and choose a new Theme , the pictures , charts , and SmartArt              graphics change to match your new theme . When you apply styles , your headings change              to match the new theme . Save time in Word with new buttons that show up where you              need them .          < / p >          < section class = "grid" >              < div class = "item" >                  #1              < / div >              < div class = "item" >                  #2              < / div >              < div class = "item" >                  #3              < / div >          < / section >          < p >              To change the way a picture fits in your document , click it and a button for layout              options appears next to it . When you work on a table , click where you want to add              a row or a column , and then click the plus sign . Reading is easier , too , in the new              Reading view . You can collapse parts of the document and focus on the text you want .              If you need to stop reading before you reach the end , Word remembers where you left              off - even on another device . Video provides a powerful way to help you prove your              point . When you click Online Video , you can paste in the embed code for the video              you want to add . You can also type a keyword to search online for the video that              best fits your document . To make your document look professionally produced , Word              provides header , footer , cover page , and text box designs that complement each other .              For example , you can add a matching cover page , header , and sidebar .          < / p >          < img class = "illustration" src = "beauty.png" title = "sample pic" alt = "beauty" / >          < p >              Click Insert and then choose the elements you want from the different galleries .              Themes and styles also help keep your document coordinated . When you click Design              and choose a new Theme , the pictures , charts , and SmartArt graphics change to match              your new theme . When you apply styles , your headings change to match the new theme .              Save time in Word with new buttons that show up where you need them . To change the              way a picture fits in your document , click it and a button for layout options appears              next to it . When you work on a table , click where you want to add a row or a column ,              and then click the plus sign . Reading is easier , too , in the new Reading view . You              can collapse parts of the document and focus on the text you want . If you need to              stop reading before you reach the end , Word remembers where you left off - even on              another device .          < / p >      < / article > < / section >

 

最後出來的效果看起來是這種：

最後爲了讓側邊欄更有意義一點，給文章正文加上一些子標題同一時候給側邊欄裏的元素加上錨點鏈接可以在文章的子標題間進行導航。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

< aside >      < ul >          < li >              < a href = "#subtitle1" > item1 < / a >          < / li >          < li >              < a href = "#subtitle2" > item2 < / a >          < / li >          < li >              < a href = "#subtitle3" > item3 < / a >          < / li >          < li >              < a href = "#subtitle4" > item4 < / a >          < / li >          < li >              < a href = "#subtitle5" > item5 < / a >          < / li >      < / ul > < / aside > < section class = "post" >      < article >          < h1 >              Sample Title          < / h1 >          < p id = "subtitle1" >              < strong >                  subtitle1              < / strong >          < / p >          < p >              //正文被省略          < / p >          < p id = "subtitle2" >              < strong >                  subtitle2              < / strong >          < / p >          < section class = "grid" >              < div class = "item" >                  #1              < / div >              < div class = "item" >                  #2              < / div >              < div class = "item" >                  #3              < / div >          < / section >          < p >              < p id = "subtitle3" >                  < strong >                      subtitle3                  < / strong >              < / p >              //正文被省略          < / p >          < p id = "subtitle4" >              < strong >                  subtitle4              < / strong >          < / p >          < img class = "illustration" src = "beauty.png" title = "sample pic" alt = "beauty" / >          < p id = "subtitle5" >              < strong >                  subtitle5              < / strong >          < / p >          < p >              //正文被省略          < / p >      < / article > < / section >

 

主要的樣式

最後加上一些樣式讓整個頁面看起來更正常些。

咱們首先去掉body元素的默認外邊距，去掉列表元素前面默認的加點，把菜單裏的超鏈接的下劃線也去掉。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

body {      margin : 0 ; }   li {      list - style : none ; }   /*navigation bar*/   nav {      background - color : #333; }   nav li {      display : inline - block ;      padding - right : 10px ; }   nav li a {      text - decoration : none ;      color : white ;      font - size : 1.5em ; }   nav li a : hover {      color : #DDD; }

再修飾下字體及正文中的三個方塊div以及其它，最後的樣式代碼差點兒相同是這種：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

html {      font - family : "microsoft yahei" , arial }   body {      margin : 0 ; }   li {      list - style : none ; }   /*navigation bar*/ nav {      background - color : #333; }   nav li {      display : inline - block ;      padding - right : 10px ; }   nav li a {      text - decoration : none ;      color : white ;      font - size : 1.5em ; }   nav li a : hover {      color : #DDD; }   /*sidebar*/ aside {      width : 15 % ;      float : left ; }   /*post*/ . post {      width : 70 % ;      margin : 0 auto ;      float : left ; }   /*grid layout*/ . grid { }   . grid . item {      width : 25 % ;      height : 150px ;      background - color : #DDD;      display : inline - block ; }   /*footer*/ footer {      width : 100 % ;      text - align : center ;      clear : both ; }   footer li {      display : inline - block ; }

當中，因爲側邊欄和文章向左浮動了。爲了讓頁腳不從最底跳到文章的後面跑到頂部去，要清除頁腳footer兩邊的浮動。

1 2 3 4 5

footer {      width : 100 % ;      text - align : center ;      clear : both ; }

最後頁面看起來着很少是這個樣子的

動態載入樣式表

接下來的工做是讓頁面成爲響應式的。

聽起來認爲是一個全新的領域，但事實上平時咱們已經在實踐了。比方當指定元素的尺寸時，使用百分比而不是固定像素的大小時。這種元素就具有自適應屏幕的能力。最多見的就是指定元素寬度爲100%。這樣窗體縮放或屏幕不一樣一時候元素始終佔領屏幕整個寬度。

一些不太有用的實踐是針對不一樣屏幕尺寸載入不一樣的樣式表，這事實上至關於爲不一樣尺寸寫不一樣的樣式表，感受維護起來不那麼方便。

1 2 3

< ! -- CSS media query on a link element -- >   < link rel = "stylesheet" media = "(max-width: 800px)" href = "example.css" / >

經過在引入樣式表時使用media屬性可以控制什麼尺寸的屏幕使用哪一個樣式表，因而咱們可以實現手機訪問時下載手機版樣式。電腦訪問時下載正常樣式。

1	< link rel = "stylesheet" media = "screen and (max-device-width: 320px)" href = "mobile.css" / >

 

上面代碼指定假設設備寬度小於320px則調用 "mobile.css"樣式表。

我的認爲這樣爲一個網站寫多個分別的樣式表不怎麼好。因此這裏就很少說了。

Viewport

響應式設計第一件需要作的事情就是在head標籤裏指定viewport meta屬性。

《Quick Tip: Don't Forget the Viewport Meta Tag》這篇文章很是好介紹了Viewport是的原因及做用。

簡單說來在手機（iPhone Safari）上訪問網頁時它默認會對網頁進行縮放。儘量多地在屏幕上展現整個頁面的內容。而縮放以後的效果可想而知。一個在電腦上正常展現的頁面被縮放進手機屏幕（通常是240*320）裏面後。很是難閱讀。

同一時候由於默認使用縮放，那麼你事先設計好的在小屏幕上使用的樣式將不起做用。也就是說手機上展現的是電腦版本號的一個縮小版。

咱們看MDN上給出的樣例截圖。

而在代碼中指定viewport，則可以讓開發人員指定網頁視圖區域及縮放比例等。這樣就能修正由瀏覽器本身主動縮放帶來的影響。

經過咱們指定例如如下代碼：

 

 

1	< meta name = "viewport" content = "width=device-width, initial-scale=1" >

 

表示使用設備寬度（即設備的屏幕寬度）並且縮放指定爲1也就是不縮放。

你可能會問這樣指定以後豈不是僅僅能在手機屏幕上顯示站點的部分。比方左上角。這時候正是響應式網頁設計起做用的時候了。假設你專門爲小屏幕的訪問進行了優化比方在CSS中使用media屬性（後面會講到），那麼當手機訪問時會調用對應的樣式規則，而不會僅僅顯示整個站點的一部分。

字體縮放

指定固定像素的字體大小是咱們設計中常用的方式，但假設你想字體大小更具彈性的話。不妨使用相對大小，CSS中比較常用的指定字體相對大小的單位有百分比，em以及CSS3新增的rem。

首先咱們指定整個文檔的字體大小爲100%。表示頁面字體大小爲瀏覽器默認大小的100%。

1 2 3 4

html {      font - family : "microsoft yahei" , arial ;      font - size : 100 % ; }

再來看看em與rem。

em單位一如他的發音它的基準單位是一個m字母的高度，同一時候它是指定相對於父級的元素中的相對大小。也就是說指定爲em的元素字體大小是經過對上一層元素的字體大小計算得來的。

1 2 3 4 5

< div style = "font-size:15px;" >      < p style = "font-size:2em;" >          Hello !      < / p > < / div >

 

上面外層div字體大小爲15px。同一時候指定內層p元素字體大小爲2em，因此p元素實際的字體大小爲15px*2=30px。這點可以經過查看瀏覽器開發工具裏面"計算後的樣式"獲得證明。

但需要注意的是em有個問題。正因爲他會相對於低級元素來計算本身的樣式。因此在層疊很是多的狀況下，可能出現意料以外的結果。