这是一个创建于 1004 天前的主题，其中的信息可能已经有所发展或是发生改变。
后端转过来的，CSS 一言难尽，好难学哇
 |
1
wenzichel 2022-02-22 17:44:37 +08:00  1
我们目前用的是 vw 布局，源码用 px 来写，然后用 postcss-px-to-viewport 插件把 px 转成 vw 。
require('postcss-px-to-viewport')({ viewportWidth: viewportWidth || 750, unitPrecision: 3, viewportUnit: 'vw' }) |
|
3
wenzichel 2022-02-22 18:01:08 +08:00
@233373 这个得配合着 webpack, gulp 等构建工具使用，随便找了篇文章，你先看看 https://juejin.cn/post/7025522373893996558 。
|
 |
4
learnshare 2022-02-22 18:14:58 +08:00
参考 /t/78570 中的讨论
响应式的核心是：适配不同设备的显示和操作 1. 内容显示 + 字体、字号、字重、行高、字词间距 + 图片、视频等内容的显示尺寸和分辨率 + 可操作区域（如按钮）的尺寸 2. 页面布局 3. 操作方式 + 鼠标、键盘 + 触摸屏、触摸手势、多指操作 + 侧滑返回等特殊操作 整体缩放是最不应该选择的方式之一，px-rem/px-vw 都是强行缩放的手段（没有怼其他楼层的意思） CSS 麻烦在模块多，组合效果丰富，谁写出来都不一样 要想学得快，可以 MDN 大致浏览一遍，然后抄页面 https://developer.mozilla.org/zh-CN/docs/Web/CSS |
 |
5
wunonglin 2022-02-22 18:19:38 +08:00
同楼上。别用 px-rem/px-vw 等方案。响应式布局的精髓是在不同的设备能以最佳的布局方式展示内容，rem 和 vwvh 的方案通常是用来做等比缩放。
等比缩放 != 响应式布局 |
 |
7
233373 OP @learnshare 感谢
|
|
9
learnshare 2022-02-22 18:35:05 +08:00
|
 |
10
molvqingtai 2022-02-22 19:10:39 +08:00 via Android
tailwindcss
|
Select Language