V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
miniyao
V2EX  ›  Vue.js

Vue 适配响应式布局,最佳实现应该怎么处理?

  •  
  •   miniyao · 2020-12-31 09:59:13 +08:00 via Android · 6497 次点击
    这是一个创建于 1452 天前的主题,其中的信息可能已经有所发展或是发生改变。
    媒体查询的话,每个页面都要写,组件化后怎么实现最佳?
    34 条回复    2021-01-01 20:00:03 +08:00
    zqguo
        1
    zqguo  
       2020-12-31 10:09:21 +08:00
    这跟 vue 没关系,rem 了解下 ?
    gdrk
        2
    gdrk  
       2020-12-31 10:09:36 +08:00
    插眼等一个,我目前都是写在一个全局 css 文件里...
    maocat
        3
    maocat  
       2020-12-31 10:10:24 +08:00
    element ui
    xieqiang9408
        4
    xieqiang9408  
       2020-12-31 10:31:18 +08:00   ❤️ 1
    tailwind css 了解一下
    manami
        5
    manami  
       2020-12-31 10:34:22 +08:00   ❤️ 2
    vue 搭配 bulma 香惨,更多请查看 https://bulma.io
    zhennann
        6
    zhennann  
       2020-12-31 10:46:23 +08:00
    pc=mobile+pad,一套页面组件同时适配 pc 端和 mobile 端。效果演示: https://cabloy.com/zh-cn/articles/adaptive-layout.html
    murmur
        7
    murmur  
       2020-12-31 10:49:58 +08:00
    每次说 rem 、响应式的我都要把小米手机的横屏移动版拿来做例子,叫你们响应,叫你们 rem
    Hanser002
        8
    Hanser002  
       2020-12-31 11:03:26 +08:00
    单独写一个容器组件容器组件包含这些媒体查询 每个页面都套上这个组件
    再简单点每个页面单独加一个媒体查询的类名
    SxqSachin
        9
    SxqSachin  
       2020-12-31 11:06:36 +08:00
    tailwindcss
    falcon05
        10
    falcon05  
       2020-12-31 11:16:06 +08:00 via iPhone
    @manami 额这不就是另一个 bootstrap 吗?
    cwz346852114
        11
    cwz346852114  
       2020-12-31 11:38:25 +08:00
    flex 布局 如果是 pc 端 建议 el 的栅格
    meldonization
        12
    meldonization  
       2020-12-31 11:39:08 +08:00
    插眼等高人
    gzf6
        13
    gzf6  
       2020-12-31 11:39:53 +08:00 via Android
    百分比和 flex, grid 可以解决大部分问题,布局好解决,但是文字的可读性是个问题,有些大得破坏布局,有些小得影响阅读,得不同设备调试,这方面媒体查询用的多点
    manami
        14
    manami  
       2020-12-31 11:40:17 +08:00
    @falcon05 bulma 只需要写 css 就行了,不需要依赖 jq,bootstrap 需要等到版本 5 才去除 jq
    wunonglin
        15
    wunonglin  
       2020-12-31 12:17:24 +08:00
    @media 了解下
    dartabe
        16
    dartabe  
       2020-12-31 12:21:53 +08:00
    扒 Walmart 和 Amazon 发现都用的 grid 布局
    zqx
        17
    zqx  
       2020-12-31 12:28:45 +08:00 via Android   ❤️ 1
    现在都倾向于不区分设备,一套代码,让浏览器去处理适配问题。
    怎么让浏览器处理呢?
    用 Flex 或 Grid 布局,浏览器厂商费了那么大力气研发这些新特性,就是为了让开发者少写兼容代码。
    现在几乎用不到媒体查询,和性能优化的精灵图一样,已经是过时的技术了。
    REM 更不是什么好方案,根据屏幕尺寸用脚本动态计算 font-size,哪个天才想出来的。浏览器为什么既支持 em 也支持 px,就是为了不同场景的用法,em 的官方用法就不是用来适配屏幕尺寸的
    wgbx
        18
    wgbx  
       2020-12-31 12:39:59 +08:00
    flex Grid 媒体查询,rem 能做屁的响应式?
    meteor957
        19
    meteor957  
       2020-12-31 12:45:48 +08:00
    @wgbx 应该是 媒询+rem
    yaphets666
        20
    yaphets666  
       2020-12-31 13:19:00 +08:00
    最近做了一个 calc 配合 vw 的
    yaphets666
        21
    yaphets666  
       2020-12-31 13:23:45 +08:00
    @function autoPx($args) {
    @return calc(#{$args} / 设计图宽度 * 100vw);
    }

    args 就是传入设计图上某个长宽高,总之是你需要的尺寸
    比如设计图上有个 div 宽度 10 像素
    后面直接用 width:autoPx(10)
    再搭配 flex 布局和百分比
    syozzz
        22
    syozzz  
       2020-12-31 15:41:38 +08:00
    mobi.css
    loading
        23
    loading  
       2020-12-31 16:43:49 +08:00 via Android
    @manami 同 bluma
    734694671
        24
    734694671  
       2020-12-31 16:54:11 +08:00
    我们现在的项目是脚手架用 px2rem 插件直接把 px 转为固定比例的 rem,然后布局用 flex 百分比写的,目前使用着 PC,Pad 都还可以,再加上移动端就得媒体查询多写点适配了
    timedivision
        25
    timedivision  
       2020-12-31 17:29:51 +08:00
    移动端就用 flex + vw
    pc 端一般管理后台就那些个框架
    做官网的话一般都有版心宽度,其次也可以用 flex,再加上点媒体查询就够了
    waiaan
        26
    waiaan  
       2020-12-31 17:50:18 +08:00
    自适应和响应式是两码事吧?
    justsosososo
        27
    justsosososo  
       2020-12-31 17:54:55 +08:00
    手机适配 rem pc 直接媒体查询 栅格 flex
    lichdkimba
        28
    lichdkimba  
       2020-12-31 17:55:07 +08:00
    element ui 大部分组件移动端都不行啊。。。。
    @maocat
    akakidz
        29
    akakidz  
       2020-12-31 17:57:17 +08:00 via Android
    @zqx 赞同,目前刚做完一个项目,rem 真的挺痛苦的
    missGo
        30
    missGo  
       2020-12-31 18:22:49 +08:00
    用 postcss-px-to-viewport 搭配 scss 封装的媒体查询也是一种路径
    KuroNekoFan
        31
    KuroNekoFan  
       2020-12-31 18:39:38 +08:00 via iPhone
    rem 方案准确的说只是同一个 layout 等比例放大缩小,使用 mediaquery 针对不同屏幕尺寸 /长宽比应用不同的 layout 才叫响应式……
    aircjm
        32
    aircjm  
       2020-12-31 23:35:15 +08:00 via Android
    quasar 应该是比较好的方案吧
    viiii
        33
    viiii  
       2021-01-01 10:01:27 +08:00 via Android
    直接 vueitfy 一把梭
    JerryY
        34
    JerryY  
       2021-01-01 20:00:03 +08:00
    不用框架的话,全局+一些定制化的适配(媒体查询)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5684 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 47ms · UTC 01:46 · PVG 09:46 · LAX 17:46 · JFK 20:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.