1. 什么是响应式布局
1. 什么是响应式布局
传统的开发方式是PC端开发一套，手机端再开发一套，甚至平板又是一套，而使用响应式布局只要开发一套就够，缺点就是CSS文件可能比较重。下图示例表示同一个响应式网站在不同屏幕尺寸终端下，布局、内容不同的展示形式。
理论上，在响应式布局中你却得考虑上百种不同的状态，虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。
优点
(2)能够快捷解决多设备显示适应问题，甚至是未来设备；
缺点
(2)可能会加载比较多的样式和脚本资源；
2. 响应式布局的实现方案
(1) 百分比布局：通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。
(3)视口单位：css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。
媒体查询是制作响应式布局的一个利器，上面也提到会受到低版本浏览器的兼容问题，下面一起聊聊媒体查询到底如何实现的。
不管采用什么方案实现响应式，都会面对一个问题：如何选择屏幕大小分割点？市面上不同品牌的终端，他们的屏幕尺寸都是参差不齐的，这也给响应式布局带来一定的麻烦。
不过还可以这样划分：480px、800px、1400px、1400px。
也可以这么分：600px、900px、1200px、1800px，可以适配到常见的14个机型。
以上的几种分割方案仅供大家参考，具体还是要按照项目中实际情况来自定义。媒体查询主要的作用是获取设备的宽和高，并设置不同屏幕尺寸下的样式、布局、内容。
/* iphone6 7 8 */
body {background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width:320px) {/* 在这里可以针对iPhone5写特定的样式和布局 */
body {background-color: red;}}
/* iphoneX */
@media screen and (min-width:375px) and (-webkit-device-pixel-ratio:3) {/* 在这里可以针对iphoneX写特定的样式和布局 */
body {background-color: #0FF000;}}
/* iphone6 7 8 plus */
@media screen and (min-width:414px) {body {background-color: blue;}}
/* ipad */
@media screen and (min-width:768px) {/* 在这里可以针对ipad写特定的样式和布局 */
body {background-color: green;}}
/* pc */
@media screen and (min-width:1100px) {/* 在这里可以针对PC写特定的样式和布局 */
body {background-color: black;}}
自适应布局就是指能使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。与响应式布局区别如下：
举个例子：我们在pc端浏览一个网站，然后把窗口缩小并刷新页面，这时候可能看到网站的二级域名变成 "m" 开头，代表是移动端。
(2) 自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。
中文网址：https://v3.bootcss.com
(2) Amaze UI
中文网址：http://amazeui.shopxo.net/
当然还有好多优秀的响应式框架，算了不再一一介绍了，让开发自己玩去。
说了这么多，但是你给我一个网站我怎么判断它是不是响应式布局呢？
今天内容到此结束了！