响应式是按照pc,pad，mobile 不同尺寸显示不同的布局内容，通过媒体查询。
自适应是手机端根据屏幕宽度做等比例的缩放。
参考
/panxiangfu/p/5533404.html
/p/b00cd3506782
具体实现原理请参照：从网易与淘宝的font-size思考前端设计稿与工作流，写的很不错！
希望对需要的朋友有所帮助！
原文地址：/a/1190000012225828
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <script> (function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if(clientWidth>=640){docEl.style.fontSize = '100px';}else{docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);</script> /*你引进的资源*/<title>标题</title> </head><body>/*你的代码*/</body></html>
css代码如下html {font-size: 32px; /* 320/10 */}body {font-size: 16px; /* 修正字体大小 *//* 防止页面过宽 */margin: auto;padding: 0;width: 10rem;/* 防止页面过宽 */outline: 1px dashed green;}/* js被禁止的回退方案 */@media screen and (min-width: 320px) {html {font-size: 32px}body {font-size: 16px;}}
/p/30413803
css样式 body的font-size 为什么用625%
浏览器的默认高度?
一般为16px.
为什么用62.5%作为body的默认样式?
16px62.5%=10px.*
那么为什么一般多是
16px *625% = 100px;
《响应式Web设计实践》中提到过这一点，桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者对应的百分比，看起来的效果是一样的，但是其他类型的设备的默认字体大小不一定是16px,特别是高分辨率的设备，16px大小的字体在它们上面看起来会非常小，所以不能在body上设置具体像素值，设置成百分比，可以按照设备的基准字体大小给编写的网页设置好最适合用户浏览的字体大小。
书中原文：最重要的不是屏幕实际的像素大小，屏幕上文字的可读性才是最重要的
因为设了62.5%后就有1rem = 10px，便于用rem来指定元素的尺寸，这样响应式的时候可以直接改变font-size而无需计算其他各种样式中出现的尺寸了。 用rem定义尺寸的另一个好处是更能适应缩放／浏览器设置字体尺寸等情况（因为rem相对于字体大小，会同步改变）。
最新
vw布局
w布局:
vw就是视口的宽度，vw 是个相对单位。
不管在什么屏幕下， 我们把屏幕分为平均的 100等份。
1vw = 1 / 100 屏幕的宽度
1vw 和 1%
widith: 1vw;
width: 1%;
vw 和 1% 有没有区别：
vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px
百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px
px 如何转为vw
我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份， 则 1vw = 3.75 px
有个盒子啊，我测量了下，他的宽度是 3.75px * 3.75px ，则 写成 vw 是多少？ 1vw * 1vw
又一个盒子，宽度和高度分别是 37.5px 和 37.5px ，则 转换为vw 是多少？ 10vw * 10vw
有一个盒子 68px * 29px ，则我们写代码 less vw ？
width: (68 / 3.75vw);
height: (29 / 3.75vw);
vw是相对于不同屏幕大小的自适应的布局单位：
1vw相当于整个屏幕宽度的100分之1，如果给最外层div设置宽度为100vw，无论屏幕变大变小，1vw始终代表当前屏幕宽度的100/1；
因此vw在实际运用中：
对于宽度来说：设计图中当前元素宽度的px值 除以设计图的宽度值，再乘以100后，加上vw单位即是当前元素的vw宽度；
对于高度来说：设计图中当前元素高度的px值 除以设计图的宽度值，再乘以100后，加上vw单位即是当前元素的vw高度；
对于字体大小：设计图中的字体大小尺寸 除以设计图的宽度值尺寸
