做 過wap站、做過siteApp、做過第三方，也做過獨(dú)立APP，現(xiàn)在又做了個(gè)自適應(yīng)的模板。所謂“響應(yīng)式網(wǎng)頁設(shè)計(jì)(Responsive Web Design)”也就是自適應(yīng)，就是可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)。就是輸入本站域名，手機(jī)、平板、PC端顯示的效果不同的，但是 URL確是相同的。

　　響應(yīng)式網(wǎng)站，利于SEO(統(tǒng)一了URL)，利于用戶體驗(yàn)，也利于用戶分享，如下圖所示：

　　

　　(圖為iphone顯示效果)

　　

　　(圖為ipad顯示效果，注意導(dǎo)航的變化)

　　

　　(圖為安卓手機(jī)微信上顯示效果)

　　

　　(PC版的直接就是現(xiàn)在這個(gè)界面了)

　　這是怎么做的呢?

　　其實(shí)完全是靠張力博主(QQ445671696)的鼎力相助，他用的是本站移植到Wordpress的模板，后面經(jīng)過多次修正與完善，制作了響應(yīng)式的網(wǎng)頁模板，后自發(fā)的為我制作了一套z-blog的自適應(yīng)模板，可謂青出于藍(lán)而勝于藍(lán)。

　　在他的協(xié)助下，我只用了一個(gè)下午時(shí)間，把盧松松博客的全站替換成了自適應(yīng)主題。

　　核心內(nèi)容在于：導(dǎo)航欄和CSS的兩個(gè)變化。

　　希望學(xué)習(xí)的朋友請(qǐng)自行查看本站源代碼，請(qǐng)注意：

　　1，網(wǎng)站導(dǎo)航兩個(gè)，一個(gè)PC端，一個(gè)移動(dòng)端，注意加粗部分。

　　PC段導(dǎo)航：

　　

<#CACHE_INCLUDE_NAVBAR#>

　　移動(dòng)端導(dǎo)航：

　　

<#ZC_BLOG_TITLE#>

<#CACHE_INCLUDE_FUNCTION28#>

　　請(qǐng)注意HTML源文件里的一個(gè)判斷語句：

　　在head里加入這條元標(biāo)簽，那移動(dòng)瀏覽器中頁面將以原始大小顯示，并不能縮放。不讓瀏覽器縮放目的是保證網(wǎng)頁能自適應(yīng)屏幕的完整性，避免網(wǎng)頁混亂。

　　width - viewport的寬度 height - viewport的高度

　　initial-scale - 初始的縮放比例

　　minimum-scale - 允許用戶縮放到的最小比例

　　maximum-scale - 允許用戶縮放到的最大比例

　　user-scalable - 用戶是否可以手動(dòng)縮放

　　那么問題來了，如何讓瀏覽器判斷設(shè)備尺寸呢?

　　有兩種方式，一種是直接在link中判斷設(shè)備的尺寸，然后引用不同的css文件，棄用。原因是博客CSS文件不大代碼也不多，不需要多個(gè)CSS文件，也能減少并發(fā)。

　　第二種就是我現(xiàn)在用的這種，請(qǐng)直接查看本站CSS文件，

　　核心代碼來了，開始研究響應(yīng)式web設(shè)計(jì)朋友，CSS3 Media Queries是入門。

　　在CSS中加入語句：

　　@media screen and (max- 600px) { /*當(dāng)屏幕尺寸小于600px時(shí)，應(yīng)用下面的CSS樣式*/

　　大家可以看到我博客里有多個(gè)判斷，1024px，768px，650px，500px，400px，350px。

　　這意味著寬度在1024px以下的屏幕，我博客會(huì)呈現(xiàn)六種不同的效果。但為了保證網(wǎng)頁的連續(xù)性與完整性，同時(shí)也是圖省事，下面六個(gè)CSS幾乎相同。

　　唯一不同的是加入了display:none，不顯示某些內(nèi)容。所以通過CSS觀察發(fā)現(xiàn)，屏幕越小，顯示的內(nèi)容就越來越少。

　　這也是文章開頭為什么pad和移動(dòng)端顯示的界面不同的原因之一。

　　要注意的是由于網(wǎng)頁會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。這一條非常重要，否則會(huì)出現(xiàn)橫向滾動(dòng)條。

　　參考代碼：

　　核心CSS文件，適用于任何程序http://lusongsong.com/zb_users/theme/LuSongSong/style/LuSongSong-Index.css

　　代碼文件，鼠標(biāo)右鍵查看本站源代碼(注意導(dǎo)航代碼的變化)，此代碼僅供zblog用戶參考。

　　圖省事的、試用WP系統(tǒng)的朋友可直接下載張力博客提供的WordPress主題：http://zhangliseo.com/wp-didiao

　　使用asp版盧松松主題的朋友，可以直接把本站的CSS拿去用。

　　總結(jié)：

　　只要制作兩個(gè)導(dǎo)航，能看懂CSS文件就可以搞定，照貓畫虎，人人都能做出響應(yīng)式的網(wǎng)頁設(shè)計(jì)，看似很難，實(shí)際上很簡單。

　　來源：盧松松博客(微信號(hào)/QQ號(hào)：13340454)

總結(jié)

以上是生活随笔為你收集整理的响应式网页设计的快速教程（适合个人站）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。