React入门篇-vw移动端适配

vw 适配,简单配置,一劳永逸,高可靠的还原设计师的稿子,给你底气和设计师对标UI。 该demo 为vw 适配方案 react 16 && react-router-dom 4+ 搭配使用,一个多页面路由项目
步骤:
  1. 创建项目 && 初始化

    create-react-app react-vw-layout
    
    cd react-vw-layout
    
  2. 开启我们的配置之路&&简单配置

    react 把配置都隐藏了,需要我们手动来显示配置

    npm run eject
    

    //Are you sure you want to eject? This action is permanent. (y/N) y
    之后可以看到 config文件 && scripts 文件夹

  3. 安装我们需要配置用到的插件(建议使用cnpm)

    npm install --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
    
  4. 开始配置

    在config/webpack.config.js 中修改代码

    //配置vw
    const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
    const postcssPxToViewport = require('postcss-px-to-viewport');
    const postcssWriteSvg = require('postcss-write-svg');
    // const postcssCssnext = require('postcss-cssnext');
    const postcssPresetEnv = require('postcss-preset-env');
    const postcssViewportUnits = require('postcss-viewport-units');
    const cssnano = require('cssnano');
    
    {
            // 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: {
              // Necessar
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值