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

[233373]

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

[wenzichel]

我们目前用的是 vw 布局，源码用 px 来写，然后用 postcss-px-to-viewport 插件把 px 转成 vw 。

require('postcss-px-to-viewport')({
viewportWidth: viewportWidth || 750,
unitPrecision: 3,
viewportUnit: 'vw'
})

[233373]

@wenzichel 有这方面的资料可以推荐吗？

[wenzichel]

@233373 这个得配合着 webpack, gulp 等构建工具使用，随便找了篇文章，你先看看 https://juejin.cn/post/7025522373893996558 。

[learnshare]

参考 /t/78570 中的讨论

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

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

CSS 麻烦在模块多，组合效果丰富，谁写出来都不一样
要想学得快，可以 MDN 大致浏览一遍，然后抄页面
https://developer.mozilla.org/zh-CN/docs/Web/CSS

[wunonglin]

同楼上。别用 px-rem/px-vw 等方案。响应式布局的精髓是在不同的设备能以最佳的布局方式展示内容，rem 和 vwvh 的方案通常是用来做等比缩放。

等比缩放 != 响应式布局

[233373]

@wenzichel 感谢

[233373]

@learnshare 感谢

[233373]

@wunonglin 我看看能不能先写一个简单的吧，PC 版本的页面已经有了，就是移动端还要适配一下

[learnshare]

@233373 像 https://www.dell.com/zh-cn 就是不错的响应式案例
通过布局的变化适应不同的显示尺寸，同时保证必要的模块和内容都能够呈现出来

[molvqingtai]

tailwindcss