总结：
响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的 css，而且 css 都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。
流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指 PC，平板，手机等设备之间较大的分辨率差异)。
如何实现响应式布局：折腾响应式布局设计，应运而生的 web 页面响应布局
==================================================================================
参考：流布局与响应式网页设计有什么区别？
-
rem,em 区别
-
rem,em 都是顺应不同网页字体大小展现而产生的。其中，em 是相对其父元素，在实际应用中相对而言会带来很多不便；而rem 是始终相对于 html 大小，即页面根元素。
-
使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为 em 是相对父级元素的原因没有得到推广。
-
【中国站点制作网页的时候，习惯用 CSS 强制定义字体大小，保证每个人都看到一致的效果，包括网易、搜狐这些门户网站在内的大部分站点，用的都是绝对单位 px（像素）。但是，如果从网站易用性方面考虑，字体大小应该是可变的，一些视力不是那么好的人需要放大字体才能看得清页面内容。然而，占据大部分浏览器市场的 IE 无法调整那些使用 px 作为单位的字体大小。国外人士非常重视网站的易用性，相当一部分外国站点已经使用 em 作为字体单位。】
-
这类布局的特点是：包裹文字的各元素的尺寸采用 em/rem 做单位，而页面的主要划分区域的尺寸仍使用百分数或 px 做单位（同「流式布局」或「静态/固定布局」）。
-
早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用 em/rem 做单位，可以使包裹文字的元素随着文字的缩放而缩放。
-
浏览器的默认字体高度一般为 16px，即 1em:16px，但是 1:16 的比例不方便计算，为了使单位 em/rem 更直观，CSS 编写者常常将页面跟节点字体设为 62.5%，比如选择用 rem 控制字体时，先需要设置根节点 html 的字体大小，因为浏览器默认字体大小 16px*62.5%=10px。这样 1rem 便是 10px，方便了计算。
-
用 em/rem 定义尺寸的另一个好处是更能**适应缩进/以字体单位 padding 或 margin／**浏览器设置字体尺寸等情况（因为 em/rem 相对于字体大小，会同步改变）
-
例如：p{ text-indent: 2em; }
-
使用 rem 单位的弹性布局在移动端也很受欢迎。
-
rem的定义
-
font size of the root element，rem 是相对于根元素来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。
-
rem 与 em、px 的区别
-
px：像素，比较精确的单位，但不好做响应式布局
-
em：以父节点 font-size 大小为参考点，标准不统一，容易造成混乱
-
REM 支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和 Opera11+。IE6-8 无法支持。
对于不同尺寸的屏幕，可以统一假设屏幕宽度为 640px 后编写 CSS（当然你也可以假定统一为 320px）。
此时，我们设定 html 元素的 font-size 为 40px（同样，只是举例），然后各处（元素尺寸、文字大小）使用 rem 作为单位，随后搭配媒体查询或 JS，根据屏幕的大小来动态控制 html 元素的 font-size（特定屏幕尺寸下，html 元素的 font-size 应当设置为何值，是使用这个方案时设计师和程序员需要反复考虑后确定的，以下试举一段相关的 CSS 媒体查询代码），即可自动改变所有用 rem 定义尺寸的元素的大小（且 CSS 编写者在脑中进行换算的计算过程比 em 简单得多）。
html {
font-size: 20px;
}
@media only screen and (min-width: 401px) {
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px) {
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px) {
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px) {
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px) {
html {
font-size: 40px !important;
}
}
其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是 rem 单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用 vw、vh 等后起之秀的单位，可以实现完美的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。详细可参考：视区相关单位 vw, vh…简介以及可实际应用场景
以下优缺点参考：响应式设计和 REM 布局的对比（有疑问）
-
优点
-
理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
-
缺点
-
这种 rem+js 只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。
响应式和弹性布局之间的对比：
-
响应式布局
-
改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。
-
rem 布局
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-8nryAImG-1710874606087)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-RIy0L7e6-1710874606088)]
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
