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

使用 vw 做响应式, PC 端怎么适配?

  •  1
     
  •   kid1412621 · 2019-05-05 12:24:31 +08:00 via Android · 6500 次点击
    这是一个创建于 1780 天前的主题,其中的信息可能已经有所发展或是发生改变。

    大漠那个用 portcss 插件 px 转 vw,但都是以手机端为例,设计稿宽度都以 750 px 算的,那我写桌面端呢?

    8 条回复    2019-05-06 22:45:43 +08:00
    WittBulter
        1
    WittBulter  
       2019-05-05 12:46:34 +08:00
    要单独写媒体查询去改样式,因为 PC 的排版会有差别,比如菜单在移动端是下拉动画,但在 PC 多数是侧边栏。
    可以试试这几个方法:


    1. 用全局的类名覆盖,比如 `md / lg` 之类的类名加在顶级,然后通过 `.lg > xx` 去写不同的样式。
    2. 写成 scss / stylus 函数用在组件。
    3. 用 `matchMedia` 之类的 JS 接口封装一个指令 / 服务 / 插件,用在组件上体现不同的排版,每个组件负责适配自己就行。

    然后你用的 px2rem vw 这种,可以在屏幕超过范围或者在 PC 中,缩放设定为固定的数值,比如 1,再去逐个兼容 PC。
    kid1412621
        2
    kid1412621  
    OP
       2019-05-05 12:54:20 +08:00
    @WittBulter 说具体些吧, 我用的 vue,同一个组件,在 pc 上和 mobile 上的长宽比不一样,字体大小也不一样,意思我要写两套?
    wu67
        3
    wu67  
       2019-05-05 14:01:14 +08:00
    还不如写两套. 那啥, 妄图统一全端的都....
    J2s
        4
    J2s  
       2019-05-05 14:34:55 +08:00
    会被自己坑的酸爽,不谈改版时候的苦逼,冗余代码导致的卡顿,就是保存两端的统一性,都要付出不止两倍的时间
    kid1412621
        5
    kid1412621  
    OP
       2019-05-05 14:40:54 +08:00
    @J2s 嗯,有感受,只是现在很前期,想写一套暂时搞定,但发现都写不出效果来
    dingxi
        6
    dingxi  
       2019-05-06 13:38:36 +08:00
    响应式 还是说的自适应?
    dingxi
        7
    dingxi  
       2019-05-06 13:43:54 +08:00   ❤️ 1
    响应式是通过排版改变,多端展示
    你说的那种可能是自适应,而且是以 iPhone6 为原型设计的,我建议吧 如果是 大于 一个尺寸访问,你的最外部的容器 就设置 为 750px 其他的 margin : 0 auto;
    参考下 那些大站的 PC 移动: https://m.weibo.cn/?jumpfrom=weibocom
    kid1412621
        8
    kid1412621  
    OP
       2019-05-06 22:45:43 +08:00
    @dingxi 谢老哥,你说的自适应的方案在两端布局不一样的时候一个就要写两套吧?
    那响应式是不是只能用譬如 bootstrap 那种方案?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5146 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 09:43 · PVG 17:43 · LAX 02:43 · JFK 05:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.