響應(yīng)式網(wǎng)頁設(shè)計的快速教程適合個人站

發(fā)布日期：2017/7/19

摘要： 做 過wap站、做過siteApp、做過第三方，也做過自力APP，現(xiàn)在又做了個自適應(yīng)的模板。所謂響應(yīng)式網(wǎng)頁設(shè)計(Responsive Web Design)也就是自適應(yīng)，就是可以主動識別屏幕寬度、并做出響應(yīng)調(diào)整的

　

 

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

　　響應(yīng)式網(wǎng)站，利于seo(同一了URL)，利于用戶體驗，也利于用戶分享，如下圖所示：

　　

 

 

 

　　(圖為ipad顯示效果，注重導(dǎo)航的轉(zhuǎn)變)

　　

　　

 

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

　　這是怎么做的呢?

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

　　在他的協(xié)助下，我只用了一個下戰(zhàn)書時間，把盧松松博客的全站替代成了自適應(yīng)主題。

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