概念：响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多的设计师采用这个技术。
如何实现响应式布局
由于响应式布局要针对不同的视口尺寸，对样式作出更多的修改，因此并不像流式布局那样让宽度自动适应那么简单。
实现响应式布局最核心的技术就是使用媒体查询（media selector）。
媒体查询是CSS3引入的概念，是指针对不同的设备、不同的视口尺寸，使用不同的样式代码。
使用@media screen and （最大/最小-width:数值）{内容}
常见的是口尺寸
虽然你现在知道了如何使用媒体查询，但我们真正关心的，是页面在手机、平板、上网本或小型笔记本、PC端中具有更好的表现力。
但问题是手机型号众多，其他设备也是如此，它们的尺寸不尽相同，我们如何来判定当前的视口尺寸属于什么设备呢？
好在经过大量的实践应用，开发者已经总结了一套普遍的适用规则，按照这套规则，你就可以将视口尺寸和具体设备对应起来。
视口≥1200px 设备：大屏幕：投影仪 电视 PC端
视口≥992px & <1200px 设备：中等屏幕：上网本、小型笔记本
视口≥768px && <992px 小屏幕：平板
<768px 设备：超小屏幕：手机
根据上述的关系表，再结合你网站的实际情况，就可以很容易的得出你需要编写的媒体查询代码。
一般情况下，我们的网站只考虑两种情况：
1. 手机端显示一种风格
2. 其他设备共享一种风格
注：开发一个实际的项目时，我们通常会选择一些预编译器来处理我们编写的CSS源代码，比如SASS。很多预编译器都对媒体查询有很好的支持。
Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。
开发移动端
移动端视口问题
视口是指浏览器的可视区域，移动端的视口到底是多宽呢？
现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。看到问题了吗？一个宽度只有375像素的手机，却能够显示宽度为980像素的网页，自然而然，网页会被缩小。
（注：实际上，这里说的375像素不是真实的物理像素，至于这个375像素是怎么来的，以及为什么大部分移动端的默认视口宽度是980，这就是一个更加复杂的话题了。）
我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px。
但，不同手机的实际宽度是不一样的。
好在HTML给我们提供了一个关键字device-width ，该关键是读取当前移动设备的宽度。
因此，我们只需要使用下面的代码，即可让所有移动设备的视口宽度和其自身的宽度相等。
< meta name="viewport" content="width=device-width">
移动端误触解决办法
< meta name="viewport" content="width=device-width, initial-scale=1.0, min
imum-scale=1.0, maximum-scale=1.0, user-scalable=0">
解析：
initial-scale=1.0 ：初始缩放比例为1.0（原始大小），这句代码的目的还不是放置用户缩放的
minimum-scale=1.0 ：网页最小的缩小比例为1.0（原始大小），设置这句代码的目的是为了放置某些程序（比如JS）无意中修改了网页的缩小比例
maximum-scale=1.0 ：网页最大的放大比例为1.0（原始大小），设置这句代码的目的是为了放置某些程序（比如JS）无意中修改了网页的放大比例
user-scalable=0 ：这句代码才是不允许用户对网页进行缩放
移动端尺寸
是同一个网页在不同尺寸手机中的效果。仔细观察，你会发现，网页中的很多元
素，随着视口的宽度变大，尺寸也会随之变大，无论是字体、高度、间隙都有这样的特点。
这样做的目的，是为了保证网页元素在不同尺寸的移动端中，显示最优的尺寸。
这样一来，就要求我们在开发移动端的页面时，当遇到字体大小、宽高、margin、padding等尺寸类的属性时，不能设置固定的像素值。
注：border边框大小除外
解决方法：
写一段JS代码，应用到网页
!(function(win, doc) {
function setFontSize() {
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 设计稿宽度) * 比例
+ ‘px‘;}
var evt = ‘onorientationchange‘ in win ? ‘orientationchange‘ : ‘resize‘;
var timer = null;
win.addEventListener(evt, function() {clearTimeout(timer);
timer = setTimeout(setFontSize, 300);}, false);
win.addEventListener("pageshow", function(e) {if (e.persisted) {
clearTimeout(timer);timer = setTimeout(setFontSize, 300);
}
}, false);
setFontSize();
}(window, document));
注：将上述代码中的 设计稿宽度 替换为设计稿的实际宽度，比如1080（不要加单位px）
注2：将上述代码中的 比例 替换为一个合适的值，比如100
而根元素html的字体大小 = (视口宽度 / 1080) * 100
rem
rem单位是相对于根元素html字体大小的（如果根元素没有设置字体大小，则相对于基准字号）。而现在，根元素的字体大小，正好反映了视口的宽度。
于是，我们只需要将各种尺寸的值，使用rem作为单位，就可以适应视口宽度的变化了
rem值 = 设计稿中的尺寸 / 100（重点！！！）
比如，设计稿中某个元素的宽度为100像素，那么应该设置它的宽度为 1rem ，这样一来，当视口尺寸等于设计稿尺寸1080时，根元素的字体大小为(1080/1080)*100 = 100px ，它的宽度为 1rem = 100px ；如果视口尺寸变小了，比如变成了375，那么根元素的字体大小为(375/1080)*100 = 34.72px ，那么它的宽度为 1rem = 34.72px 。这样就完美的和设计稿比例一致了。
注意：在移动端，如果使用了背景图（比如雪碧图），记得用同样的方式调整背景图的尺寸。
响应式布局
原文：https://www.cnblogs.com/html-he-css/p/11062923.html
