这是一个创建于 728 天前的主题，其中的信息可能已经有所发展或是发生改变。
我的理解是
自适应布局：布局、字体大小等跟随屏幕分辨率（浏览器页面）同步缩放，保持原来的显示方式，只是变大变小的问题。
响应式布局：根据屏幕分辨率（浏览器页面）大小的不同，页面布局会发生变化，利用媒体查询事先写好不同分辨率下的布局。
不知这样理解对不对。
另外关于自适应布局，一般用 vw （ vh ）还是百分比还是 rem ？谢谢。
做大屏要适应不同分辨率的屏幕，长宽比是一样的，现在用的是 scale ，或多或少会有显示上的问题。
 |
1
kop1989smurf 2022-04-22 09:51:37 +08:00
自适应：无论什么终端的显示比例，都能显示相同的界面。
响应式：针对每种终端特色，提供最适合终端特点的布局方案。（比如你把手机 web 页的交互与 ui 呈现给电视，是绝对不合适的） |
 |
2
3dwelcome 2022-04-22 09:59:17 +08:00
自适应布局缩放，老外有一个很好的方法。
就是对 UI 界面里按照像素的重要度排序，依次去掉最不重要的像素点，这样就可以把 UI 界面按照类似九宫格来智能压缩。 原理类似于 photoshop 里的智能照片缩放，图片大小变了，人物比例不变。 算法换到 UI 里，就是先压 UI 空白缝隙和大面积纯色区域，智能保留图标和所有 UI 边界。 |
 |
3
renmu123 2022-04-22 10:02:48 +08:00 via Android
rem 适用性最好。vh 在手机端不同的浏览器实现可能会有差异
|
 |
4
GeruzoniAnsasu 2022-04-22 10:14:15 +08:00  1
……
「自适应」是页面呈现的效果 feature 「响应式」是达成目的所用到的实现 feature 这俩维度的词 预生成全世界所有屏幕大小的页面也能做到「自适应」 每一帧都强制重算并重绘所有元素的大小也能做到「自适应」 但这俩都不「响应式」 「响应式」 reactive 指的是建立元素之间的约束关系，比如讲 .content.header 的高度约束到窗口的 1/10 ，当窗口高度变化时，由于约束，header 的高度会随之变化，即被约束元素（ header ） 对约束元素（窗口）做出了「反应」(react)，由此可称这个 header 的大小是「 reactive 」（的），翻译过来叫「响应式」 vw/vh 和 rem 也是性质不同的单位，拿到一起比较都显得很奇怪，建议连文档都看不来的话不如直接抄别人的做法 |
 |
5
dddd1919 2022-04-22 10:15:37 +08:00
自适应：不动元素，改变排版布局，比如 v2 的页面就是自适应的
响应式：元素缩放，排版也可能改变 |
 |
6
molvqingtai 2022-04-22 11:31:51 +08:00
vw/vh 已经没有什么兼容性问题了，常用方式是使用 rem 模拟 vw/vh
个人经常这样使用： <html style="font-size: calc(100vw / 375 * 16)"> </html> 有两点好处： 1 、不需要依赖构建和第三方库 2 、375 设计稿 16px = 16rem 没有心智负担 amfe-flexible 同理，只不过是把页面分成了 10 份，并计算了 drp 解决了 1 像素边框问题 |
|
7
molvqingtai 2022-04-22 11:34:16 +08:00
说错了，375 设计稿 应该是 1rem = 16px
|
 |
8
anguiao 2022-04-22 11:44:11 +08:00
这是你自己发明的，并没有这种区分。
|
 |
9
pytth 2022-04-22 14:51:16 +08:00
|
 |
10
otakustay 2022-04-22 17:21:23 +08:00
最早的自适应应该不是这个等比缩放的意思，而是真正的流式布局。不知怎么就变成现在这个 rem 搞缩放的了
响应式对 UI 设计的要求太高了，所以一般跑不起来…… |
 |
11
Trello 2022-10-30 18:19:07 +08:00
@molvqingtai 可以请教一下，为什么要设置 1rem 为 16px 吗？直接 1rem 为 1px ，一比一不是更方便吗？这样都不用换算，设计稿多少 px ，就多少 rem 。
|
|
12
molvqingtai 2022-11-19 02:53:22 +08:00 via Android
@Trello 因为浏览器默认最小字体 12px ，默认字体大小 16px ，就算根元素设置 font-size: 1px 浏览器也会回退到 12px
以 16px 为基准，在不同大小的屏幕上 1rem 始终是 16px 的大小，当然也有方便计算的方案 1rem = 62.5% 、1rem = 100px ... 看一看看这篇文章 https://www.google.com/amp/s/www.freecodecamp.org/chinese/news/what-is-rem-in-css/amp/ |
|
13
molvqingtai 2022-11-19 03:01:38 +08:00 via Android
更正 “在不同大小的屏幕上 1rem 始终是 16px 的大小”
在不同大小的屏幕上始终以默认字体大小 16px 为基准缩放 |
|
14
Trello 2022-11-19 11:28:20 +08:00
@molvqingtai 其实你可以试一下，根元素 html 设置 1px ，浏览器最终会退到 12px 不假，但是这不影响后面子元素 rem 的使用，rem 相对的还是你设置的这个 1px ，而不是 12px 。
|
|
15
Trello 2022-11-19 11:29:24 +08:00
@molvqingtai 可以看下这个 demo： https://jsbin.com/boyexat/edit?html,css,output
|
|
16
Trello 2022-11-19 11:30:49 +08:00
@molvqingtai 我根元素 html 设置了 1px ，子元素 div 使用宽高设置了 10rem ，如果按你说的，宽高最后显示的应该是 120*120 ，但是页面效果依然是 10*10 。
|
|
17
molvqingtai 2022-11-20 02:21:14 +08:00
@Trello #16 页面中文字大小还是 16px ，不过有些方案也有通过设置 body font-size 重置 html font-size 的影响
|
Select Language