转为rem

大屏最重要的就是分辨率适配问题，对此我们可以将每个页面中的元素设置为rem来完成页面内元素长宽设置，但是通常我们的设计稿是用px来标注的，如果让我们自己将px全部转为rem，大概吐血了吧。。。。这里我们引入插件帮我们解决这个问题

配置

1. 安装@njleonzhang/postcss-px-to-rem
2. 配置webpack

                    {
                        // Options for PostCSS as we reference these options twice
                        // Adds vendor prefixing based on your specified browser support in
                        // package.json
                        loader: require.resolve('postcss-loader'),
                        options: {
                            // Necessary for external CSS imports to work
                            // https://github.com/facebook/create-react-app/issues/2677
                            ident: 'postcss',
                            plugins: () => [
                                require('postcss-flexbugs-fixes'),
                                require('postcss-preset-env')({
                                    autoprefixer: {
                                        flexbox: 'no-2009',
                                    },
                                    stage: 3,
                                }),
                                require('@njleonzhang/postcss-px-to-rem')({
                                    unitToConvert: 'px',
                                    widthOfDesignLayout: 1920,
                                    unitPrecision: 5,
                                    selectorBlackList: ['.ignore', '.hairlines'],
                                    minPixelValue: 1,
                                    mediaQuery: false
                                })
                            ],
                        }

使用

p {
    width: 100px;
}

转码后

p {
    width: 0.52083rem;
}

使用vh 和 vw作为单位

这里注意，使用vh和vw作为单位和使用百分数的区别是vh和vw是和视口的大小作为对比的，但是使用百分数是和父元素的大小作为对比的。
px和vh vw转换工具连接

参考连接

https://github.com/QuellingBlade/postcss-px-to-rem
https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html