經過響應式web設計，使本站支持手機瀏覽

 

2014-01-28 14:49:14

如今愈來愈多的人經過手機來上網，手機因爲屏幕尺寸的緣由，當瀏覽爲PC端瀏覽器設計的網頁的時候，每每會出現各類各樣的問題。 糊塗僧的這個小博客也同樣，爲了讓本站在手機端也表現的較好，因此今天用上了響應式web設計的思路，對本站進行了改造，如今在手機上瀏覽本站可以獲得較好的體驗。

1、問題

如今愈來愈多的人經過手機來上網，手機因爲屏幕尺寸的緣由，當瀏覽爲PC端瀏覽器設計的網頁的時候，每每會出現各類各樣的問題。
糊塗僧的這個小博客也同樣，爲了讓本站在手機端也表現的較好，因此今天用上了響應式web設計的思路，對本站進行了改造，如今在手機上瀏覽本站可以獲得較好的體驗。

咱們先來看一下效果，看看應用響應式設計先後，在手機上瀏覽本站的樣子：

以前的樣子，是把網站按比例縮小了，基本上看不清文字，只能經過放大了看



應用響應式設計以後的樣子，內容跟PC端同樣，只是佈局不同了，也沒有縮放，看起來更適合在手機端閱讀。



2、響應式設計的簡單原理

下面咱們先看一下到底什麼是響應式WEB設計，是怎麼來實現的。
響應式WEB設計聽起來挺高端大氣上檔次的，它的英文叫「Responsive Web Design」，在我們國內也叫流式設計、自適應佈局等等，都是一個意思。
它解決的問題是，讓網頁在各類不一樣分辨率的屏幕上表現的儘量好。

說到佈局，咱們知道在網頁製做當中， 負責樣式佈局的就是CSS了，一個頁面的文字大小啊，元素的寬高啊，都由CSS來負責， 因此響應式WEB設計的核心就是讓不一樣的分辨率使用不一樣的CSS。好比在PC端，應用的是一套CSS，在手機端用的是另一套CSS。

下面就介紹兩個響應式設計的核心HTML CSS元素， ViewPort 和 MediaQuery

一、什麼是ViewPort？
ViewPort直接翻譯過來就是「視口」，我看國內有些人也是這麼叫的，詳細的介紹你們能夠去看蘋果官方的一個介紹，仍是很不錯的，說的很詳細，Safari Web Content Guide: Configuring the Viewport

簡單來講，就是可視區域，好比咱們手機瀏覽器。 由於Viewport是個區域，因此它有這幾個屬性，寬、高、是否縮放、縮放比例等。

上面的圖片，在未應用響應式web設計以前，手機瀏覽器是把頁面縮放了，實際上也就是ViewPort的縮放屬性起了做用。那麼，咱們如今第一步要作的就是，讓頁面別縮放，該是多大就顯示多大。

那麼，咱們就要經過ViewPort屬性來作，告訴瀏覽器不要縮放，
具體的代碼就是在HTML頭部，加上一個meta標記，name就叫viewport，後面能夠跟上viewport的那些屬性。

width=device-width 就是告訴瀏覽器，viewport的寬度就是當前設備的寬度，好比iphone是320px
initial-scale =1 就是告訴瀏覽器，初始的縮放比例是1，也就是1:1顯示，不縮放。

二、MediaQuery屬性
MediaQuery翻譯過來是「媒體查詢」，也就是瀏覽器可以知道當前設備的一些狀況，好比設備的分辨率是多少，你是橫屏仍是豎屏等。 經過MediaQuery，咱們就可以對不一樣的分辨率應用不一樣的 CSS樣式。

MediaQuery是寫在CSS中的，大致的寫法以下：

body{color:red;}
@media only screen and (max-width : 480px) {body{color:blue;}}
@media only screen and (min-width:480px and max-width : 960px) {body{color:#000000;}}

意思是，默認狀況，頁面文字是紅色的， 當屏幕寬度小於480px時，頁面文字變成藍色的， 當頁面寬度大於480px小於960px時，頁面文字變成黑色的。


3、本站是如何作的

經過上面的介紹， 你們應該有了大致的思路了， 代碼也很簡單，我就是在原有css的後面加上了下面的代碼，當瀏覽器的寬度小於480px的時候，應用下面的CSS來從新對頁面佈局，好比把「糊塗僧」幾 個字的大小調小點，把左側的導航欄搬到上面等， 具體你們能夠翻翻個人代碼看看。
http://www.hutuseng.com/ui/css/layout.css

@media only screen and (max-width : 480px) 
{
    img{max-width:100%; height:auto;} /*讓圖片也可以自適應*/
   #logo{height: 40px;font-size: 16px;padding: 5px 10px;} /*糊塗僧幾個字變小點 ,間距調小點*/
   .slidebar{padding: 0px;width: 100%;float: none;clear: both;overflow: hidden;} /*左側導航欄不浮動了*/
   .mainContent{margin-left: 0px;} /*右側內容區沒有左邊距了*/
   .article .article_image {float: none;width: 100%;} /*文章的圖片不浮動了，單獨一行*/
   .article .article_summary{margin-left: 0px;} /*文章的簡介放在圖片下面顯示了*/

}