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';