V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
waiaan
V2EX  ›  前端开发

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

  •  
  •   waiaan · 293 天前 · 1550 次点击
    这是一个创建于 293 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我的理解是

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

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

    不知这样理解对不对。

    另外关于自适应布局,一般用 vw ( vh )还是百分比还是 rem ?谢谢。

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

    17 条回复    2022-11-20 02:21:14 +08:00
    kop1989smurf
        1
    kop1989smurf  
       293 天前
    自适应:无论什么终端的显示比例,都能显示相同的界面。
    响应式:针对每种终端特色,提供最适合终端特点的布局方案。(比如你把手机 web 页的交互与 ui 呈现给电视,是绝对不合适的)
    3dwelcome
        2
    3dwelcome  
       293 天前
    自适应布局缩放,老外有一个很好的方法。

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

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

    算法换到 UI 里,就是先压 UI 空白缝隙和大面积纯色区域,智能保留图标和所有 UI 边界。
    renmu123
        3
    renmu123  
       293 天前 via Android
    rem 适用性最好。vh 在手机端不同的浏览器实现可能会有差异
    GeruzoniAnsasu
        4
    GeruzoniAnsasu  
       293 天前   ❤️ 1
    ……

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

    这俩维度的词


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

    但这俩都不「响应式」

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




    vw/vh 和 rem 也是性质不同的单位,拿到一起比较都显得很奇怪,建议连文档都看不来的话不如直接抄别人的做法
    dddd1919
        5
    dddd1919  
       293 天前
    自适应:不动元素,改变排版布局,比如 v2 的页面就是自适应的
    响应式:元素缩放,排版也可能改变
    molvqingtai
        6
    molvqingtai  
       292 天前
    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
        7
    molvqingtai  
       292 天前
    说错了,375 设计稿 应该是 1rem = 16px
    anguiao
        8
    anguiao  
       292 天前
    这是你自己发明的,并没有这种区分。
    pytth
        9
    pytth  
       292 天前
    响应式要写多套 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
        10
    otakustay  
       292 天前
    最早的自适应应该不是这个等比缩放的意思,而是真正的流式布局。不知怎么就变成现在这个 rem 搞缩放的了

    响应式对 UI 设计的要求太高了,所以一般跑不起来……
    Trello
        11
    Trello  
       101 天前
    @molvqingtai 可以请教一下,为什么要设置 1rem 为 16px 吗?直接 1rem 为 1px ,一比一不是更方便吗?这样都不用换算,设计稿多少 px ,就多少 rem 。
    molvqingtai
        12
    molvqingtai  
       82 天前 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/
    molvqingtai
        13
    molvqingtai  
       82 天前 via Android
    更正 “在不同大小的屏幕上 1rem 始终是 16px 的大小”

    在不同大小的屏幕上始终以默认字体大小 16px 为基准缩放
    Trello
        14
    Trello  
       81 天前
    @molvqingtai 其实你可以试一下,根元素 html 设置 1px ,浏览器最终会退到 12px 不假,但是这不影响后面子元素 rem 的使用,rem 相对的还是你设置的这个 1px ,而不是 12px 。
    Trello
        15
    Trello  
       81 天前
    Trello
        16
    Trello  
       81 天前
    @molvqingtai 我根元素 html 设置了 1px ,子元素 div 使用宽高设置了 10rem ,如果按你说的,宽高最后显示的应该是 120*120 ,但是页面效果依然是 10*10 。
    molvqingtai
        17
    molvqingtai  
       81 天前
    @Trello #16 页面中文字大小还是 16px ,不过有些方案也有通过设置 body font-size 重置 html font-size 的影响
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   实用小工具   ·   5136 人在线   最高记录 5556   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 68ms · UTC 03:12 · PVG 11:12 · LAX 19:12 · JFK 22:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.