我們今天要分析的是 響應式布局 和 自定義樣式。興奮吧、激動吧，我自己都淡定不下來了。哈哈。 前面我們做了那麼多鋪墊，就是為了今天的 響應式布局 和 自定義樣式。在這個多終端的時代，你不能在移動端正常顯示？ out了吧。那麼 我們怎麼實作 響應式布局呢？有人馬上會說Bootstrap，好吧我确實知道這麼個東西。但是 實話 我也沒怎麼用過 ，不熟悉 不了解。但是我知道肯定是 根據螢幕分辨率大小 給不同的樣式。既然 這樣 我們何 不自己寫呢。畢竟 别人的 東西，如果不夠了解的話， 總會出現未知的情況。
前言
這次開發的部落客要功能或特點：
第一：可以相容各終端，特别是手機端。
第二：到時會用到大量html5，炫啊。
第三：導入部落格園的精華文章，并做分類。（不要封我）
第四：做個插件，任何網站上的技術文章都可以轉發收藏 到本部落格。
是以打算寫個系類：《一步步搭建自己的部落格》
- 一步步開發自己的部落格 .NET版（1、頁面布局、blog遷移、資料加載）
- 一步步開發自己的部落格 .NET版（2、評論功能）
- 一步步開發自己的部落格 .NET版（3、注冊登入功能）
- 一步步開發自己的部落格 .NET版（4、文章釋出功能）
- 一步步開發自己的部落格 .NET版（5、搜尋功能）
- 一步步開發自己的部落格 .NET版（6、手機端的相容）
示範位址：http://haojima.net/ 群内共享源碼：469075305
《一步步開發自己的部落格》這個系列到這裡算是完結了。前面的注冊、登入、評論、釋出、搜尋每個星期一篇博文，同時每個星期（也就周末兩天）一個版本。這個部落格系統使用是的mvc4 ef6.0，對于mvc之前沒是沒有使用過。在這個系統裡面使用 我也是邊學邊用。肯定有用的不足和不全的地方，那我也隻能後期再修修改改了。我想說的是，前奏給足了，我們現在是不是 該來點高潮的呢？
我們今天要分析的是 響應式布局 和 自定義樣式。興奮吧、激動吧，我自己都淡定不下來了。哈哈。
前面我們做了那麼多鋪墊，就是為了今天的 響應式布局 和 自定義樣式。在這個多終端的時代，你不能在移動端正常顯示？ out了吧。那麼 我們怎麼實作 響應式布局呢？有人馬上會說Bootstrap，好吧我确實知道這麼個東西。但是 實話 我也沒怎麼用過 ，不熟悉 不了解。但是我知道肯定是 根據螢幕分辨率大小 給不同的樣式。既然 這樣 我們何 不自己寫呢。畢竟 别人的 東西，如果不夠了解的話， 總會出現未知的情況。
好了，說了這麼多。來說說今天要分析的重點内容吧。
首頁的響應式布局
為什麼說是首頁的響應式布局呢？因為 我隻打算做首頁 的 響應式布局。部落格内容的 顯示頁面 由使用者自定義。别急 這個等下後面會講到。
1.什麼是響應式布局？
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動網際網路浏覽而誕生的。
響應式布局可以為不同終端的使用者提供更加舒适的界面和更好的使用者體驗，而且随着目前大螢幕移動裝置的普及，用“大勢所趨”來形容也不為過。随着越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。--來源百度百科
2.怎樣實作響應式布局
現在響應式布局用得比較大衆的應該是Bootstrap，但是我并不打算使用。原因很簡單，我對Bootstrap不熟悉不了解。然後 我簡單的看了下Bootstrap是怎麼實作的響應式布局。原理很簡單，就是使用到了CSS3中的media。media何方神聖？可以用來吃嗎？它可以針對不同的媒體類型定義不同的樣式，也可以針對不同的螢幕尺寸設定不同的樣式。且當你重置浏覽器大小的過程中，頁面也會根據浏覽器的寬度和高度重新渲染頁面。既然如此，響應式何愁。
3.media的簡單使用
Max Width：在可視區域的寬度小于 600px 的時候被應用。
@media screen and (max-width: 600px) {
.class {
background: #0094ff;
}
} Min Width：在可視區域的寬度大于600px 的時候被應用。
@media screen and (min-width: 600px) {
.class {
background: red;
}
} 簡單？對，就是如此簡單。您還可以 在600到900直接的啟用。
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #0094ff;
}
} 當然，您還可以，放入單獨檔案。爽歪歪了吧。
<link rel="stylesheet" media="screen and (max-width: 600px)" href="max600.css" /> 好了，你已經知道得太多了。實作一個首頁的響應式 基本上已經夠用了。
預設樣式 顯示 移動端：
.blog_body_e.col-xs-12 .a_blog_user {
display: inline-block;
}
.blog_body_e, .blog_body_b {
padding-left: 10px;
padding-right: 10px;
} 如果是PC端：（預設 大于992px就算是PC端 當然，你也可以自定義）
@media (min-width: 992px) {
.blog_body_e.col-md-3 .a_blog_user {
display: block;
}
.blog_body .blog_body_b {
width: 80%;
float: left;
}
.blog_body .blog_body_e {
width: 20%;
float: left;
box-sizing: border-box;
padding-right: 25px;
}
.blog_body_e, .blog_body_b {
padding-left: 20px;
padding-right: 20px;
}
} 我們看分布看看效果圖
PC端：
手機端：
還可以吧，
。
ASP.NET MVC移動端識别
上面我們已經說了 響應式布局，但那是用戶端的，針對于同一個視圖頁面的。不過 同一個視圖頁面 通過響應式布局 也是有缺點的 會導緻頁面 樣式十分龐大 頁面加載效率降低，而且隻能 做局部的調整，如果 要做
大的調整 會比較複雜 或根本就不可能實作。
那我們有沒有别的辦法。答案是有的。如果我們 可以在背景 識别 請求過來的是 PC端 還是移動端，然後 加載不同的視圖。這樣 我們就可以有多 份視圖。還好 我們偉大的ASP.NET MVC裡面是很好實作的。你隻要在你的請求的視圖 在複制一個 改名為.Mobile.cshtml如：_Layout.cshtml和_Layout.Mobile.cshtml。沒了？對 的 ，沒了。如果是 移動端的請求 那麼會自動請求_Layout.Mobile.cshtml如果是PC端 那麼會自動請求_Layout.cshtml 。
這樣 我們就可以針對兩大類 再做響應式布局。
有人會說，我們在本地開發 都是PC端請求。那麼我們怎麼測試移動端的效果呢？一定要釋出到線上 然後用手機測試？那多麻煩啊，每改一個樣式都要 釋出一次。好吧，我再告訴你一個 訣竅。在PC端 僞裝成移動端直接在PC端看移動端的效果。看下面的代碼，複制到Global.asax檔案的MvcApplication方法裡面。打開注釋 就是 預設顯示 移動端效果。釋出的時候記得注釋掉。
////打開注釋 預設 是 移動端 顯示效果
//DisplayModeProvider.Instance.Modes.RemoveAt(0);
//DisplayModeProvider.Instance.Modes.Insert(0,
// new DefaultDisplayMode("Mobile")
// {
// ContextCondition = Context => true
// }
// ); 關于自定義樣式
自定義樣式
我們都是向往自由的，一個部落格怎麼可以沒有自定義樣式的功能呢？好吧，那我就加一個。
那麼自定義樣式有哪些功能呢？CSS樣式、JS腳本權限、頁首html、側邊欄html、頁尾html 都給加上吧。既然你要自由，就給你絕對的自由。
當時，我還在考慮 自定義樣式 存資料庫 還是 存文本呢？存文本吧，一般也不會存在同時通路一個檔案的情況。因為每個使用者 都給了一個檔案夾來儲存。頁面加載請求的時候也不用讀資料庫，直接請求檔案 也會要快很多。
說到想到、想到做到，我們每個登入使用者在 跳轉到 自定義 樣式頁面的時候 我們 會檢測 是否存在，如果存在 則加載之前 的内容，不存在 建立一個空的檔案。當請求部落格内容頁面的時候 如果有 自定義樣式 直接加載 過來 ok。簡單。
禁用預設主題樣式
我們上面 修改了樣式 ，但是 我們的預設 主題的樣式 還是存在的，除非 你全部覆寫掉。有的前端 的高手 ，可能就要說了，我想直接禁用預設主題樣式啊，一個個的去覆寫你的多麻煩。好吧，我們做程式員的就是這麼苦逼，你想要，我就給。
。這裡，正好 我們把之前 頁面内的css樣式 和 行内css全部分離處理，放到單獨的 css檔案裡。然後 我們 在請求部落格内容頁面的時候，判斷 你是否禁用的 預設樣式 ，如果是 我們就不加載了。
在其他博友頁面啟用自定義主題樣式
這可是我們的重頭戲了。什麼是 “在其他博友頁面啟用自定義主題樣式”，那個誰 還說我是在玩強奸，我想說 你誤會了。“在其他博友頁面啟用自定義主題樣式” 是有條件的。第一、你必須在你的設定頁面 勾選了“在其他博友頁面啟用自定義主題樣式”。第二、你必須是登入狀态。（那麼也就是說 其實 隻有你自己看得到而已，其他使用者 或 沒有登入的遊客 看到的 還是 部落格對應的原始使用者 定義的主題樣式）,為什麼要這麼做呢？沒有為什麼，我就是嫌棄定義的主題樣式太醜了，我不想看，但是 你的文章内容又很有營養，想看。糾結了吧。
那就顯示我自己的主題樣式來閱讀你的文章内容，這樣 你可以定義 有利于在移動端的樣式 然後閱讀任何人的文章。爽吧。
說是這麼說，怎麼實作呢。其實 我們都已經講了，我們在資料庫裡面存一個bool值 是否 啟用顯示 。然後 我們浏覽部落格内容的時候 檢測 是否 是登入狀态，如果否，這 顯示 部落格使用者的 主題樣式。如果是登入狀态，然後在在判斷 你是否啟用了， 如果沒有啟用 還是 顯示 部落格使用者的樣式，最好 如果你登入了 然後 啟用了 最後 才在其他博友 的部落格内容頁面 顯示你自己 定義的樣式。
手機端自定義樣式和PC端自定義樣式
前面我們已經說過了，可以在MVC背景識别請求的是移動端還是PC端，那我們就 做兩份視圖，你可以分别自定義 移動端樣式 和 PC端樣式。
效果圖：
（截圖好像好多小蝌蚪
）
總結
這裡主要講了 響應式布局 然後 在響應式布局不能滿足的情況下 我們可以 建立 針對不同的終端 建立 對應的 響應式 這樣 可以縮小 範圍 有利于 頁面的加載 和 頁面跟好的顯示。然後 我們還說了 自定義樣式、和禁用樣式 在 其他博友頁面啟用 自定義主題樣式。其實 用代碼實作起來 都不難。隻要 理清了 邏輯 和自己想要的效果。
關于這系列部落格 到這裡 也該告一段落了，真心話 一個星期一個版本 就周末兩天 真心的累。繃緊的神經 感覺好久都沒有放松過了。在這裡 我要感謝 一路園友們的支援，不然 我還真堅持不下來。
現在 我終于 可以放松放松 ，然後陪陪老婆了。這陣子 老是抱怨我 電腦才是 我的老婆，都不和她說話了。
有人說，那你的這個部落格系統都不用維護的嗎？要維護，還會加 沒有想到的 一些功能 和效果。 不過 不用這麼 急迫了。趁着這段時間 我可以慢慢的 重構下 代碼。
後期 我在這個 部落格系統 中覺得有用的 或 新加的功能 會再單獨 寫博文來分析。
這才是第一版哦，還會有第二版 第三版，當然 要是有人關注的話。
（我們的終極目标是：PC移動相容、能在各大部落格網收藏儲存文章到我們的部落格系統、能在手機用戶端離線下載下傳閱讀部落格文章）
對了，如果 誰有興趣開發 iPhone、iPad或安卓用戶端的 可以聯系我。(我們的目的很簡單 隻是一起學習而已)
暫時提供API:http://blog.haojima.net/UserBlog/webapi 而且已經有朋友 做出了 安卓版的 雛形。（當然 這位朋友 到時候也會寫安卓版 系列文章 和大家一起探讨學習 【請移步到此】）
示範位址：http://blog.haojima.net/Admin/ConfigurePC
如果您對本篇文章感興趣，那就麻煩您點個贊，您的鼓勵将是我的動力。
當然您還可以加入QQ群:
一步步開發自己的部落格 .NET版 劇終篇（6、響應式布局 和 自定義樣式） 讨論。
如果您有更好的處理方式，希望不要吝啬賜教。
一步步開發自己的部落格 .NET版系列：http://www.cnblogs.com/zhaopei/tag/Hi-Blogs/
本文連結：http://www.cnblogs.com/zhaopei/p/4823359.html
開源位址：http://git.oschina.net/zhaopeiym/Hi-Blogs
- 學習本是一個不斷抄襲、模仿、練習、創新的過程。
- 雖然，園中已有本人無法超越的同主題博文，為什麼還是要寫。
- 對于自己，博文隻是總結。在總結的過程發現問題，解決問題。
- 對于他人，在此過程如果還能附帶幫助他人，那就再好不過了。
- 由于部落客能力有限，文中可能存在描述不正确，歡迎指正、補充！
- 感謝您的閱讀。如果文章對您有用，那麼請輕輕點個贊，以資鼓勵。
- 工控物聯Q群：995475200