V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
jack4536251
V2EX  ›  问与答

2023 年了,前端最流行的自适应方案是什么?

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

    想做个视频网站,要求 pc 和手机自适应,有好用的方案推荐吗?

    31 条回复    2023-07-07 08:46:32 +08:00
    yhxx
        1
    yhxx  
       319 天前   ❤️ 4
    最流行的方案是做两套,监测设备自动跳转(doge:
    estk
        2
    estk  
       319 天前 via iPhone
    css media query
    chuck1in
        3
    chuck1in  
       319 天前
    @yhxx 已经不流行那个什么媒体查询了?
    rainsounds
        4
    rainsounds  
       319 天前
    pc 响应式布局容器+媒体查询,手机 px 转 viewport
    lovedebug
        5
    lovedebug  
       319 天前
    做两套,BFF 层一个功能就是做这个的后端适配的
    murmur
        6
    murmur  
       319 天前
    媒体查询那是糊弄人的,做个给程序员用的网站还行,苹果做了响应式,你没看到他每一块内容都是精心设计过的
    lilei2023
        7
    lilei2023  
       319 天前
    px 转 viewport 吧,感觉挺省事
    sentinelK
        8
    sentinelK  
       319 天前
    pc 和手机不可能“自适应”。

    都是要针对性设计功能的,pc 和手机的操作习惯,屏幕比例,屏幕空间都不一样,自适应的结果就是两边不讨喜,左右不是人。
    chjieza
        9
    chjieza  
       319 天前
    同一楼,桌面设备和移动设备各一套,同时每套响应式布局容器+媒体查询+媒体查询,移动端设备也做得原因是适配 IPAD ,甚至为平台再做一套。
    tkHello
        10
    tkHello  
       319 天前
    做两套 一直是最流行的
    tkHello
        11
    tkHello  
       319 天前
    1 套的 没成功过 都是玩家 可以用来忽悠老板
    chjieza
        12
    chjieza  
       319 天前
    当然也得看页面是什么,核心产品肯定是要尽可能适配。一般的活动页啥的,保准布局不乱差不多就行了。
    ruoxie
        13
    ruoxie  
       319 天前 via iPhone
    做两套,不然后期就是折磨自己
    crysislinux
        14
    crysislinux  
       319 天前 via Android
    一套只适合那种布局比较简单的站。复杂了就容易搞得一团糟
    tool2d
        15
    tool2d  
       319 天前   ❤️ 1
    要求不高就用 tailwind css 的自适应框架。

    要求高,那就只能两套了。PC 页面靠点击,手机页面靠滑动,操作逻辑都不太一样。
    yuthelloworld
        16
    yuthelloworld  
       319 天前
    css media query + js matchMedia
    可以用 tailwind css
    目前就是用这个方案做的 pc + 移动端,支持 pc 点击和手机滑动
    abc635073826
        17
    abc635073826  
       318 天前
    强制跳转
    wolfan
        18
    wolfan  
       318 天前
    css media flex+grid
    ruzhan123
        19
    ruzhan123  
       318 天前
    代码布局尽量用百分比,然后慢慢适配屏幕吧
    dcsuibian
        20
    dcsuibian  
       318 天前
    我也感觉做两套比较好,一套响应式太费脑子
    dioxide
        21
    dioxide  
       318 天前
    做一套响应式同时适配两端的话, 前提设计、后期维护成本会很高. 分开实现更实际
    dioxide
        22
    dioxide  
       318 天前
    如果 PC 和 pad 之间(可是区域尺寸跨度不大)间适配还有可行性, 操作体检也接近些
    libasten
        23
    libasten  
       318 天前 via Android
    看这个帖子刷新最近的观念了,
    之前以为响应式自适应是很多大公司首选呢。
    现在看来,还是做两套最科学啊。
    不过自适应还是要考虑吧?现在移动端屏幕尺寸五花八门的。
    maplerecall
        24
    maplerecall  
       318 天前
    两套,实践下来 media query 只适合做同平台下不同尺寸的适配,不适合做跨平台
    suzic
        25
    suzic  
       318 天前 via Android
    这需求不是多复杂的场景,完全可以一套啊,想 diy 就自己写,不想 diy 就找 md 规范的组件库,谷歌这套是自适应的
    murmur
        26
    murmur  
       318 天前
    @libasten 不适应,就是拉大百分比,其余的地方留空

    适应的反例就是小米的网站,他没有监测横屏竖屏,如果是横屏浏览,就会错误的返回 pad 尺寸

    然后就能看到奇葩的界面布局

    现在应该改过来了,不过现在总体策略就是单做移动,ipad 两侧留白给你显示个大手机,pc 干脆提示下载 app
    shui14
        27
    shui14  
       318 天前   ❤️ 1
    这个要分类型的,如果是展示型,偏设计或者内容的,css 多套就可以了;如果是功能型的或者业务型的,要么两套,要么做取舍,因为很多时候手机和电脑的操作天然就不一样,强行一致往往就是强奸用户,比如产品逼着开发给安卓搞上 ios 的选择器,完全不尊重平台的差异,根据差异来调整。
    anoninz
        28
    anoninz  
       318 天前
    不知道啥流行,但如果两端功能一致的话,可以数据层写一套,UI 层写两套。UI 尽量薄。
    qweruiop
        29
    qweruiop  
       318 天前
    一般都是写 2 套吧,现在移动和 pc 的交互方式差异巨大。。。
    unclemcz
        30
    unclemcz  
       318 天前 via Android
    我只会 bootstrap
    woshinide300yuan
        31
    woshinide300yuan  
       318 天前
    我只会复制粘贴
    @media (min-width:1200px){.container{max-width:1160px}
    }
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5249 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 06:04 · PVG 14:04 · LAX 23:04 · JFK 02:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.