关于自适应布局和响应式布局

2022-04-22 09:48:01 +08:00
 waiaan

我的理解是

自适应布局：布局、字体大小等跟随屏幕分辨率（浏览器页面）同步缩放，保持原来的显示方式，只是变大变小的问题。

响应式布局：根据屏幕分辨率（浏览器页面）大小的不同，页面布局会发生变化，利用媒体查询事先写好不同分辨率下的布局。

不知这样理解对不对。

另外关于自适应布局，一般用 vw （ vh ）还是百分比还是 rem ？谢谢。

做大屏要适应不同分辨率的屏幕，长宽比是一样的，现在用的是 scale ，或多或少会有显示上的问题。

2471 次点击
所在节点    前端开发
17 条回复
kop1989smurf
2022-04-22 09:51:37 +08:00
自适应：无论什么终端的显示比例，都能显示相同的界面。
响应式：针对每种终端特色，提供最适合终端特点的布局方案。（比如你把手机 web 页的交互与 ui 呈现给电视，是绝对不合适的）
3dwelcome
2022-04-22 09:59:17 +08:00
自适应布局缩放，老外有一个很好的方法。

就是对 UI 界面里按照像素的重要度排序，依次去掉最不重要的像素点，这样就可以把 UI 界面按照类似九宫格来智能压缩。

原理类似于 photoshop 里的智能照片缩放，图片大小变了，人物比例不变。

算法换到 UI 里，就是先压 UI 空白缝隙和大面积纯色区域，智能保留图标和所有 UI 边界。
renmu123
2022-04-22 10:02:48 +08:00
rem 适用性最好。vh 在手机端不同的浏览器实现可能会有差异
GeruzoniAnsasu
2022-04-22 10:14:15 +08:00
……

「自适应」是页面呈现的效果 feature
「响应式」是达成目的所用到的实现 feature

这俩维度的词


预生成全世界所有屏幕大小的页面也能做到「自适应」
每一帧都强制重算并重绘所有元素的大小也能做到「自适应」

但这俩都不「响应式」

「响应式」 reactive 指的是建立元素之间的约束关系，比如讲 .content.header 的高度约束到窗口的 1/10 ，当窗口高度变化时，由于约束，header 的高度会随之变化，即被约束元素（ header ） 对约束元素（窗口）做出了「反应」(react)，由此可称这个 header 的大小是「 reactive 」（的），翻译过来叫「响应式」




vw/vh 和 rem 也是性质不同的单位，拿到一起比较都显得很奇怪，建议连文档都看不来的话不如直接抄别人的做法
dddd1919
2022-04-22 10:15:37 +08:00
自适应：不动元素，改变排版布局，比如 v2 的页面就是自适应的
响应式：元素缩放，排版也可能改变
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 像素边框问题
molvqingtai
2022-04-22 11:34:16 +08:00
说错了，375 设计稿 应该是 1rem = 16px
anguiao
2022-04-22 11:44:11 +08:00
这是你自己发明的，并没有这种区分。
pytth
2022-04-22 14:51:16 +08:00
响应式要写多套 CSS
---
例如适配 PC 端的
@media screen and (min-width: 1000px)
适配 Pad 端的
@media screen and (min-width: 640px) and (max-width: 1000px)
适配手机端的
@media screen and (max-width: 639px)
otakustay
2022-04-22 17:21:23 +08:00
最早的自适应应该不是这个等比缩放的意思，而是真正的流式布局。不知怎么就变成现在这个 rem 搞缩放的了

响应式对 UI 设计的要求太高了，所以一般跑不起来……
Trello
2022-10-30 18:19:07 +08:00
@molvqingtai 可以请教一下，为什么要设置 1rem 为 16px 吗？直接 1rem 为 1px ，一比一不是更方便吗？这样都不用换算，设计稿多少 px ，就多少 rem 。
molvqingtai
2022-11-19 02:53:22 +08:00
@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/
molvqingtai
2022-11-19 03:01:38 +08:00
更正 “在不同大小的屏幕上 1rem 始终是 16px 的大小”

在不同大小的屏幕上始终以默认字体大小 16px 为基准缩放
Trello
2022-11-19 11:28:20 +08:00
@molvqingtai 其实你可以试一下，根元素 html 设置 1px ，浏览器最终会退到 12px 不假，但是这不影响后面子元素 rem 的使用，rem 相对的还是你设置的这个 1px ，而不是 12px 。
Trello
2022-11-19 11:29:24 +08:00
@molvqingtai 可以看下这个 demo： https://jsbin.com/boyexat/edit?html,css,output
Trello
2022-11-19 11:30:49 +08:00
@molvqingtai 我根元素 html 设置了 1px ，子元素 div 使用宽高设置了 10rem ，如果按你说的，宽高最后显示的应该是 120*120 ，但是页面效果依然是 10*10 。
molvqingtai
2022-11-20 02:21:14 +08:00
@Trello #16 页面中文字大小还是 16px ，不过有些方案也有通过设置 body font-size 重置 html font-size 的影响

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/848501

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX