1. 通过bootstrap框架来实现响应式
bootstrap是近年比较流行的响应式布局框架，支持html5，其宗旨就是以移动端为优先开发，它的栅格系统对于响应式开发比较方便，只需要加一个布局容器：
<div class="container"></div>，通过栅格系统的md sm等来划分不同大小比例，这样设备就会根据不同栅格大小让元素自动适用于不同的设备，万书涛也用过bootstrap开发过一些响应式模板，来说说优缺点
优点：
方便开发，系统自动实现了一些布局栅格系统，所以我们只需要根据页面元素大小比例选择合适大小栅格就可以了，同时bootstrap还带有很多图标和字体，方便了我们开发，而且可以免费使用。
缺点：
1. 有些地方不灵活，比如，导航部分，一级导航那里，bootstrap只有点击出现下拉菜单，而没有滑动下拉菜单这一项，而且移动端点击一级导航是不能够进入相关页面的，只能出现下拉二级菜单。
2. bootstrap自带很多样式，比如元素边距等等，有的时候会自动出现我们不想要的样式，可能找了半天都不知是哪里的原因，还要我们逐渐改动这些样式，无形中增加了劳动力。
总之，bootstrap是一个方便响应式开发的框架，对于一般的开发来说是能够简化一定的劳动力的。
2. 通过media screen媒体查询来实现
这个可以说是目前响应式网站开发必备的一个功能，包括前面所说的bootstrap，也离不开media screen的理论支持，media screen的理论是针对不同的设备，分别写一套相应的css，常用的设备宽度有手机端480，平板电脑768，大型平板1024，以及Pc端1200等等，代码示例格式如下：
以上代码通过设置max-width来区分不同设备的css样式，比如max-width: 768px这个，表示在最大宽度768像素下，对应的css样式是什么样子的，同样，最大宽度480像素表示针对的是移动端设备，最终实现不同设备自动调用不同的样式，比如，万书涛的个人博客下的个人博客模板都是通过这种方式来实现的，效果如下图一：通过图一可以看出在不同的设备，通过设置相应的css样式可以实现不同设备显现不同的样式效果。
3. 通过vw和vh来实现
这种布局方式可以说是百分比的进化方式，因为如果使用百分比布局的话，如果父窗口不设置具体宽和高，子窗口即使设置百分比，也会出现高度不统一的情况，特别是图片列表，有时想要在不同分辨率下统一高度，如果使用百分比，是比较难办的，这个时候，可以设置vw或者vh，来固定总得宽和高，这个vw是相对于视窗的宽度，然后其他元素就相对与固定元素的百分比来实现具体宽和高，因为我们无论如何缩小放大窗口，只要针对窗口的比例不变，元素的高度就是统一的，这个在一些列表页中，带有图片的地方用的比较多，具体案例可以看这篇文章：《网页图片列表随着窗口变化出现错位导致页面变形通用解决方法》。
4.通过百分比%来实现
响应式布局很多地方都用到百分比，因为既然是响应式，必然面临一个相对宽度的问题，针对不同设备的大小，通过设置一定的百分比，来实现相对大小，比如，万书涛开发制作的《清爽紫罗兰帝国cms个人博客模板》，这个模板很多地方采用的百分比，像是下图中的图片列表，就是采用的百分比，这样随着窗口大小的缩小或者放大，图片也跟着放大和缩小
5. rem布局和其他框架布局
rem布局严格意义上来说不属于响应式布局，它只是一个相对单位，是相对于px的一种单位，用在移动端布局比较多，最大用处是在字体方面用的比较多，比如，在最外层父级设置1rem=14px，这样的话，后面子单位的字体只需要设置成多少rem就可以，这样就可以相对父单位自动增大和缩小了。
比如，设置body 层或者html层font-size:14px,表示1rem=14px.后面就可以用rem单位了
用这个的好处是：在不同设备上，通过设置根font-size的不同大小，子元素的rem自动放大和缩小
以上就是万书涛总结的响应式布局的几种方法，也是目前比较常见的方法，希望对大家了解响应式布局有一定的帮助
PS：本文来自万书涛的个人博客，感谢分享。
bootstrap是近年比较流行的响应式布局框架，支持html5，其宗旨就是以移动端为优先开发，它的栅格系统对于响应式开发比较方便，只需要加一个布局容器：
<div class="container"></div>，通过栅格系统的md sm等来划分不同大小比例，这样设备就会根据不同栅格大小让元素自动适用于不同的设备，万书涛也用过bootstrap开发过一些响应式模板，来说说优缺点
优点：
方便开发，系统自动实现了一些布局栅格系统，所以我们只需要根据页面元素大小比例选择合适大小栅格就可以了，同时bootstrap还带有很多图标和字体，方便了我们开发，而且可以免费使用。
缺点：
1. 有些地方不灵活，比如，导航部分，一级导航那里，bootstrap只有点击出现下拉菜单，而没有滑动下拉菜单这一项，而且移动端点击一级导航是不能够进入相关页面的，只能出现下拉二级菜单。
2. bootstrap自带很多样式，比如元素边距等等，有的时候会自动出现我们不想要的样式，可能找了半天都不知是哪里的原因，还要我们逐渐改动这些样式，无形中增加了劳动力。
总之，bootstrap是一个方便响应式开发的框架，对于一般的开发来说是能够简化一定的劳动力的。
2. 通过media screen媒体查询来实现
这个可以说是目前响应式网站开发必备的一个功能，包括前面所说的bootstrap，也离不开media screen的理论支持，media screen的理论是针对不同的设备，分别写一套相应的css，常用的设备宽度有手机端480，平板电脑768，大型平板1024，以及Pc端1200等等，代码示例格式如下：
@media screen and (max-width: 1200px) { .qlcontent .lcon{ width: 73%; float: left; } .qlcontent .rcon{ width:26%;} } @media screen and (max-width: 1024px) { .qlcontent{ max-width:1024px;} .qlnav{ position: relative; } @media screen and (max-width: 768px) { .qlcontent{ max-width:1024px;} .qlnav{ position: relative; } @media screen and (max-width: 480px) { .qlcontent{ max-width:1024px;} .qlnav{ position: relative; } |
3. 通过vw和vh来实现
这种布局方式可以说是百分比的进化方式，因为如果使用百分比布局的话，如果父窗口不设置具体宽和高，子窗口即使设置百分比，也会出现高度不统一的情况，特别是图片列表，有时想要在不同分辨率下统一高度，如果使用百分比，是比较难办的，这个时候，可以设置vw或者vh，来固定总得宽和高，这个vw是相对于视窗的宽度，然后其他元素就相对与固定元素的百分比来实现具体宽和高，因为我们无论如何缩小放大窗口，只要针对窗口的比例不变，元素的高度就是统一的，这个在一些列表页中，带有图片的地方用的比较多，具体案例可以看这篇文章：《网页图片列表随着窗口变化出现错位导致页面变形通用解决方法》。
4.通过百分比%来实现
响应式布局很多地方都用到百分比，因为既然是响应式，必然面临一个相对宽度的问题，针对不同设备的大小，通过设置一定的百分比，来实现相对大小，比如，万书涛开发制作的《清爽紫罗兰帝国cms个人博客模板》，这个模板很多地方采用的百分比，像是下图中的图片列表，就是采用的百分比，这样随着窗口大小的缩小或者放大，图片也跟着放大和缩小
5. rem布局和其他框架布局
rem布局严格意义上来说不属于响应式布局，它只是一个相对单位，是相对于px的一种单位，用在移动端布局比较多，最大用处是在字体方面用的比较多，比如，在最外层父级设置1rem=14px，这样的话，后面子单位的字体只需要设置成多少rem就可以，这样就可以相对父单位自动增大和缩小了。
比如，设置body 层或者html层font-size:14px,表示1rem=14px.后面就可以用rem单位了
@media screen and (max-width: 1200px) { .qlcontent .lcon{ width: 73%; float: left; font-size:1.1rem } } @media screen and (max-width: 1024px) { .qlcontent{font-size:1rem } |
用这个的好处是：在不同设备上，通过设置根font-size的不同大小，子元素的rem自动放大和缩小
以上就是万书涛总结的响应式布局的几种方法，也是目前比较常见的方法，希望对大家了解响应式布局有一定的帮助
PS：本文来自万书涛的个人博客，感谢分享。
