做過wap站、做過siteapp、做過第三方，也做過獨立app，現在又做了個自適應的模板。所謂「響應式網頁設計(responsive web design)」也就是自適應，就是可以自動識別螢幕寬度、並做出相應調整的網頁設計。就是輸入本站網域名稱，手機、平板、pc端顯示的效果不同的，但是url確是相同的。
響應式**，利於seo(統一了ur程式設計客棧l)，利於使用者體驗，也利於使用者分享，如下圖所示：
(圖為iphone顯示效果)
(圖為ipad顯示效果，注意導航的變化)
(圖為安卓手機微信上顯示效果)
(pc版的直接就是現在這個介面了)
這是怎麼做的呢?
其實完全是靠張力博主的鼎力相助，他用的是本站移植到wordpress的模板，後面經過多次修正與完善，製作了響應式的網頁模板，後自發的為我製作了一套z-blog的自適應模板，可謂青出於藍而勝於藍。
在他的協助下，我只用了乙個下午時間，把盧鬆鬆部落格的全站替換成了自適應主題。
核心內容在於：導航欄和css的兩個變化。
希望學習的朋友請自行檢視本站源**，請注意：
1，**導航兩個，乙個pc端，乙個移動端，注意加粗部分。
pc段導航：
移動端導航：
請注意html原始檔裡的乙個判斷語句：
在head裡加入這條元標籤，那移動瀏覽器中頁面將以原始大小顯www.cppcns.com示，並不能縮放。不讓瀏覽器縮放目的是保證網頁能自適應螢幕的完整性，避免網頁混亂。
width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
le - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放
那麼問題來了，如何讓瀏覽器判斷裝置尺寸呢?
有兩種方式，一種是直接在link中判斷裝置的尺寸，然後引用不同的css檔案，棄用。原因是部落格css檔案不大**也不多，不需要多個css檔案，也能減少併發。
第二種就是我現在用的這種，請直接檢視本站css檔案，
核心**來了，開始研究響應式web設計朋友，css3 media queries是入門。
在css中加入語句：
@media screen and (max-width: 600px) { /*當螢幕尺寸小於600px時，應用下面的css樣式*/
大家可以看到我部落格裡有多個判斷，1024px，768px，650px，500px，400px，350px。
這意味著寬度在1024px以下的螢幕，我部落格會呈現六種不同的效果。但為了保證網頁的連續性與完整性，同時也是圖省事，下面六個css幾乎相同。
唯一不同的是加入了display:none，不顯示某些內容。所以通過css觀察發現，螢幕越小，顯示的內容就越來越少。
這也是文章開頭為什麼pad和移動端顯示的介面不同的原因之一。
要注意的是由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用www.cppcns.com具有絕對寬度的元素。這一條非常重要程式設計客棧，否則會出現橫向滾動條。
參考**：
核心css檔案，適用於任何程式
**檔案，滑鼠右鍵檢視本站源**(注意導航**的變化)，此**僅供zblog使用者參考。
圖省事的、試用wp系統的朋友可直接**張力部落格提供的wordpress主題：
使用asp版盧鬆鬆主題的朋友，可以直接把本站的css拿去用。
總結：只要製作兩個導航，能看懂css檔案就可以搞定，照貓畫虎，人人都能做出響應式的網頁設計，看似很難，實際上很簡單。
小編推薦：設計師必讀的15個優秀響應式網頁設計教程
本文標題: 響應式網頁設計的快速教程（適合個人站點）
本文位址: /web/css/82875.html
iPhoneX響應式網頁設計教程
iphonex響應式網頁設計教程，iphone x正式發售了。隨之而來的是乙個新的白色線條，幸福地坐在底部的觸控板上，它替代了原有的home鍵。這也喚起了人們對物理home鍵的懷舊情結。頂部的黑色凹槽採用了許多最先進的技術 紅外攝像頭 環境感應器 光感感測器等 所有這些都是用來支援面部識別的。iph...
響應式網頁設計教程 展示響應式設計的基本原理
響應式網頁設計，毫無疑問地變得越來越重要了。如果你還沒聽說過響應式設計，可以先看看我之前發的文章響應式 對新手來說,響應式設計聽起來可能會有點複雜,但事實上，它比你想象的簡單得多。為了讓你能快速入門，我準備了乙個簡易的教程。通過這三個步驟，你一定可以了解響應式設計的基本原理和media query ...
響應式網頁設計示例
若要全方位測試你自己或別人的響應式 則需要針對每一種裝置和不同的螢幕尺寸，分別準備不同的測試系統。儘管這是最完美的辦法，但通過改變瀏覽器視窗大小其實就可以完成大多數測試。除此之外，還有很多第三方外掛程式和瀏覽器擴充套件可供選擇，通過它們可以將當前瀏覽器視窗或視口設定為指定畫素。必要時，還可以自動將當...