rem: wsui-vw-rem 解决 rem 适配问题

利用 css 、vw 来解决移动端适配问题

项目主页: https://github.com/afeiship/wsui-vw-rem

安装

yarn add @jswork/wsui-vw-rem

与 tailwind 配合

使用 375/16px 与 tailwind 默认一致

@tailwind base;
@tailwind components;
@tailwind utilities;

@import '@jswork/wsui-vw-rem';

// settings for wsui-vw-rem
$wsui-vw-rem-screen-width: 375px;
$wsui-vw-rem-base-font-size: 16px;
@include wsui-vw-rem();

实际中稿子为750

保证与设计稿一致，可以调整参数如下，目的是让设计稿的尺寸下 html 的 font-size: 16px 即可。

$wsui-vw-rem-screen-width: 750px;
$wsui-vw-rem-base-font-size: 32px;

---

简单使用

@import '@jswork/wsui-vw-rem/dist/tailwind.dist.css';