响应式网页设计的快速教程适合个人站

发布日期：2017/7/19

摘要： 做 过wap站、做过siteApp、做过第三方，也做过自力APP，现在又做了个自适应的模板。所谓响应式网页设计(Responsive Web Design)也就是自适应，就是可以主动识别屏幕宽度、并做出响应调整的

　

 

　　做 过wap站、做过siteApp、做过第三方，也做过自力APP，现在又做了个自适应的模板。所谓“响应式网页设计(Responsive Web Design)”也就是自适应，就是可以主动识别屏幕宽度、并做出响应调整的网页设计。就是输入本站域名，手机、平板、PC端显示的效果不同的，但是 URL确是相同的。

　　响应式网站，利于seo(同一了URL)，利于用户体验，也利于用户分享，如下图所示：

　　

 

 

 

　　(图为ipad显示效果，注重导航的转变)

　　

　　

 

　　(PC版的直接就是现在这个界面了)

　　这是怎么做的呢?

　　其实完全是靠张力博主(QQ445671696)的鼎力相助，他用的是本站移植到Wordpress的模板，后面经过多次修正与完美，制作了响应式的网页模板，后自觉的为我制作了一套z-blog的自适应模板，可谓青出于蓝而胜于蓝。

　　在他的协助下，我只用了一个下战书时间，把卢松松博客的全站替代成了自适应主题。

　　核心内容在于：导航栏和CSS的两个转变。