一、响应式网站和一般网站建设的不同点
响应式网站和一般网站建设的最大不同点就是响应式网站只需要建设一套前端页面模板就可以了，而普通网站至少需要设计一套pc网站，一套手机网站，后期还涉及到pc网站和手机网站数据同步以及收录适配问题，比较麻烦，所以现在万书涛建议直接做响应式网站就好了。
二、响应式网站建设步骤
响应式网站和其他网站一样，也要从网站定位、域名和服务器选择、响应式网站设计和制作、上线运营等来进行，本文主要介绍下响应式网站设计和制作的相关知识，其他的制作步骤感兴趣可以看这篇文章：《如何建设个人网站和博客，详细制作过程》，虽然是讲的个人网站制作步骤，但是同样适用于其他类型响应式网站的制作。
下面来谈谈响应式网站的设计和制作需要注意的问题
目前来说响应式网站可以通过bootstrap框架来实现，bootstrap就是专门为响应式设计而生，而且框架着重以移动端优先为基准设计，浏览器兼容好，也比较容易上手，尤其是对于html和css响应式设计不熟悉的，推荐使用，关于这方面的教程，推荐到菜鸟教程上去看看。
还有一种方法是自己写css代码来实现，核心思想是通过media screen媒体查询来实现，也就是是如下代码：通过设置max-width为1200，1024，768，480等不同大小来实现不同设备的显示效果，当然，这个就对html和css布局有一定的要求了，因为全部要通过自己手写。
@media screen and (max-width: 1200px)
{
.qlcontent .lcon{ width: 73%;
float: left;
}
比如，上面的代码就表示在最大宽度1200px分辨率下，qlcontent .lcon的样式让它进行左浮动，这样，就可以在不大于1200px分辨率下分别单独进行样式定制设计了，其他以此类推，响应式就是这样实现的，没有后端代码什么事。
万书涛建议，对于前端html和css用的不多的同学，还是使用bootstrap吧，虽然bootstrap对于一些复杂的设计可能稍微有点捉襟见肘，但是大部分网站还是可以完全胜任的，只要页面或者功能不是要求过于苛刻都可完成。
三、响应式网站建设案例欣赏。
为了加深大家对响应式网站的印象，万书涛在响应式模板建设中，博客网站和行业网站案例各选择一套，案例均为万书涛原创设计，手动写代码实现的响应式设计页面，大家可以通过页面的结构看一下大致是什么样子，当然了，这些网站模板都是完整源码模板，部署到服务器上就可以使用了，如果对源码感兴趣请到这里查看：《响应式网站模板》。
1.淡雅瑜伽健身帝国cms响应式网站模板
模板以淡粉红色为主色设计，符合瑜伽网站优美淡雅而又适合女性健身的设计需求，让网站显得简约大方，前端采用html5+css3制作，采用响应式设计，模板同时兼容pc端、平板电脑和移动端，如下图所示，左侧为pc端页面，右侧为手机端页面，详情请看：《淡雅瑜伽健身帝国cms响应式网站模板》。
2.金色多模块帝国cms响应式个人博客模板
模板采用金黄色为主色调设计，采用多模块设计，包括文章展示、图片展示和下载、会员等功能，前端采用html5+css3制作，后端采用帝国cms为核心制作，支持纯静态，模板同时兼容pc端、平板电脑和移动端，如下图所示，左侧为pc端页面，右侧为手机端页面，详情请看：《金色多模块帝国cms响应式个人博客模板》。
以上就是响应式网站建设的各个过程，希望对大家了解响应式网站建设有所帮助。
PS：本文来自万书涛的个人博客，感谢分享。
响应式网站和一般网站建设的最大不同点就是响应式网站只需要建设一套前端页面模板就可以了，而普通网站至少需要设计一套pc网站，一套手机网站，后期还涉及到pc网站和手机网站数据同步以及收录适配问题，比较麻烦，所以现在万书涛建议直接做响应式网站就好了。
二、响应式网站建设步骤
响应式网站和其他网站一样，也要从网站定位、域名和服务器选择、响应式网站设计和制作、上线运营等来进行，本文主要介绍下响应式网站设计和制作的相关知识，其他的制作步骤感兴趣可以看这篇文章：《如何建设个人网站和博客，详细制作过程》，虽然是讲的个人网站制作步骤，但是同样适用于其他类型响应式网站的制作。
下面来谈谈响应式网站的设计和制作需要注意的问题
目前来说响应式网站可以通过bootstrap框架来实现，bootstrap就是专门为响应式设计而生，而且框架着重以移动端优先为基准设计，浏览器兼容好，也比较容易上手，尤其是对于html和css响应式设计不熟悉的，推荐使用，关于这方面的教程，推荐到菜鸟教程上去看看。
还有一种方法是自己写css代码来实现，核心思想是通过media screen媒体查询来实现，也就是是如下代码：通过设置max-width为1200，1024，768，480等不同大小来实现不同设备的显示效果，当然，这个就对html和css布局有一定的要求了，因为全部要通过自己手写。
@media screen and (max-width: 1200px)
{
.qlcontent .lcon{ width: 73%;
float: left;
}
比如，上面的代码就表示在最大宽度1200px分辨率下，qlcontent .lcon的样式让它进行左浮动，这样，就可以在不大于1200px分辨率下分别单独进行样式定制设计了，其他以此类推，响应式就是这样实现的，没有后端代码什么事。
万书涛建议，对于前端html和css用的不多的同学，还是使用bootstrap吧，虽然bootstrap对于一些复杂的设计可能稍微有点捉襟见肘，但是大部分网站还是可以完全胜任的，只要页面或者功能不是要求过于苛刻都可完成。
三、响应式网站建设案例欣赏。
为了加深大家对响应式网站的印象，万书涛在响应式模板建设中，博客网站和行业网站案例各选择一套，案例均为万书涛原创设计，手动写代码实现的响应式设计页面，大家可以通过页面的结构看一下大致是什么样子，当然了，这些网站模板都是完整源码模板，部署到服务器上就可以使用了，如果对源码感兴趣请到这里查看：《响应式网站模板》。
1.淡雅瑜伽健身帝国cms响应式网站模板
模板以淡粉红色为主色设计，符合瑜伽网站优美淡雅而又适合女性健身的设计需求，让网站显得简约大方，前端采用html5+css3制作，采用响应式设计，模板同时兼容pc端、平板电脑和移动端，如下图所示，左侧为pc端页面，右侧为手机端页面，详情请看：《淡雅瑜伽健身帝国cms响应式网站模板》。
2.金色多模块帝国cms响应式个人博客模板模板采用金黄色为主色调设计，采用多模块设计，包括文章展示、图片展示和下载、会员等功能，前端采用html5+css3制作，后端采用帝国cms为核心制作，支持纯静态，模板同时兼容pc端、平板电脑和移动端，如下图所示，左侧为pc端页面，右侧为手机端页面，详情请看：《金色多模块帝国cms响应式个人博客模板》。
以上就是响应式网站建设的各个过程，希望对大家了解响应式网站建设有所帮助。
PS：本文来自万书涛的个人博客，感谢分享。
