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

新人入坑前端,请问应该如何学习 H5 移动端响应式布局呢?

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

    后端转过来的,CSS 一言难尽,好难学哇

    10 条回复    2022-02-22 19:10:39 +08:00
    wenzichel
        1
    wenzichel  
       226 天前   ❤️ 1
    我们目前用的是 vw 布局,源码用 px 来写,然后用 postcss-px-to-viewport 插件把 px 转成 vw 。

    require('postcss-px-to-viewport')({
    viewportWidth: viewportWidth || 750,
    unitPrecision: 3,
    viewportUnit: 'vw'
    })
    233373
        2
    233373  
    OP
       226 天前
    @wenzichel 有这方面的资料可以推荐吗?
    wenzichel
        3
    wenzichel  
       226 天前
    @233373 这个得配合着 webpack, gulp 等构建工具使用,随便找了篇文章,你先看看 https://juejin.cn/post/7025522373893996558
    learnshare
        4
    learnshare  
       226 天前
    参考 /t/78570 中的讨论

    响应式的核心是:适配不同设备的显示和操作
    1. 内容显示
    + 字体、字号、字重、行高、字词间距
    + 图片、视频等内容的显示尺寸和分辨率
    + 可操作区域(如按钮)的尺寸
    2. 页面布局
    3. 操作方式
    + 鼠标、键盘
    + 触摸屏、触摸手势、多指操作
    + 侧滑返回等特殊操作

    整体缩放是最不应该选择的方式之一,px-rem/px-vw 都是强行缩放的手段(没有怼其他楼层的意思)

    CSS 麻烦在模块多,组合效果丰富,谁写出来都不一样
    要想学得快,可以 MDN 大致浏览一遍,然后抄页面
    https://developer.mozilla.org/zh-CN/docs/Web/CSS
    wunonglin
        5
    wunonglin  
       226 天前
    同楼上。别用 px-rem/px-vw 等方案。响应式布局的精髓是在不同的设备能以最佳的布局方式展示内容,rem 和 vwvh 的方案通常是用来做等比缩放。

    等比缩放 != 响应式布局
    233373
        6
    233373  
    OP
       226 天前
    @wenzichel 感谢
    233373
        7
    233373  
    OP
       226 天前
    @learnshare 感谢
    233373
        8
    233373  
    OP
       226 天前
    @wunonglin 我看看能不能先写一个简单的吧,PC 版本的页面已经有了,就是移动端还要适配一下
    learnshare
        9
    learnshare  
       226 天前
    @233373https://www.dell.com/zh-cn 就是不错的响应式案例
    通过布局的变化适应不同的显示尺寸,同时保证必要的模块和内容都能够呈现出来
    molvqingtai
        10
    molvqingtai  
       226 天前 via Android
    tailwindcss
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1081 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 68ms · UTC 23:46 · PVG 07:46 · LAX 16:46 · JFK 19:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.