rem 方案原理
rem 的工程化实践
- 在实际开发工程时，我肯定不想去把设计稿里的元素一一计算转成rem，然后在代码里写 width: xxx rem，我还是希望直接写设计稿里标注的 px，然后由工具自动转成 rem 去适配所有设备；
- 这里介绍两个 npm package：
- lib-flexible：它就是规定不论什么设备，都把宽度分成 10 份，并且设定了 html 的 font-size；
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px' - 在 postccs 里使用 postcss-pxtorem：postcss 的一个插件，在处理 css 时自动将手写的 px 转成 rem，配置项可以去看文档；
'postcss-pxtorem': { rootValue: 75, // 设计稿的 1rem = 75px propList: ['*'] }
- lib-flexible：它就是规定不论什么设备，都把宽度分成 10 份，并且设定了 html 的 font-size；
- 这样一来，pxtorem 这个插件会自动将我们写的 css 中的 px 转成相对于 750px 尺寸设计稿的 rem 单位了；
告别 rem，使用 vw
- lib-flexible 的 GitHub 已经宣布停止使用 rem 方案了，因为找到了新的更好的全局性参照单位：vw；
- 1vw 就等于屏幕宽度的 1% ，它本质上就是一个百分比单位，比如 3vw 就相当“屏幕宽度的 3%”，那么用 vw 单位可以直接写成：750/75 = 10vw，即占页面宽度的 10%；
- 还是之前的问题，人工进行设计稿的 px 到 vw 单位的转换太麻烦，在开发中使用 Webpack 编译打包，那么已经有人开发了 postcss 的插件：postcss-px-to-viewport，配置好这个插件，你写 CSS 的时候可以严格按照设计稿上的像素值去写，这个插件负责将你写的 px 转换为 vw；
打赏作者
您的打赏是我前进的动力
微信
支付宝
webpack 模块化兼容性实现
上一篇
评论
