1

<!--

  • @Author: starkwang
  • @Contact me: https://shudong.wang/about
  • @Date: 2019-11-29 12:16:29
  • @LastEditors: starkwang
  • @LastEditTime: 2019-11-29 12:17:19
  • @Description: 在nextjs项目里面配置px转rem插件:postcss-pxtorem

-->
20191129133716

本文首发:https://shudong.wang/10675.html
nextjs-kit脚手架 :bnextjs-kit脚手架

在nextjs.config里面的stylus配置 添加上 postcssLoaderOptions选项

...
  [
    stylus,
    {
      cssModules: true,
      cssLoaderOptions: {
        importLoaders: 1,
        localIdentName
      },
      postcssLoaderOptions: {
        // parser: 'sugarss',
        config: {
          ctx: {
            theme: JSON.stringify(process.env.REACT_APP_THEME)
          }
        }
      }
    }
  ],

在项目里面增加postcss.config.js 文件

module.exports = {
  plugins: [
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
    require('postcss-pxtorem')({
      rootValue: 16,
      unitPrecision: 5,
      mediaQuery: false,
      minPixelValue: 0,
      propList: [
        '*background*',
        '*padding*',
        '*margin*',
        'letter-spacing',
        '*width',
        'left',
        'font*',
        'right',
        'top',
        'bottom'
      ]
    })
  ]
};

在项目public里面创建 reset.css

html {
  font-size: 16px;
}

@media screen and (min-width: 375px) {
  html {
    /* iPhone6的375px尺寸作为16px基准,414px正好18px大小, 600 20px */
    font-size: calc(100% + 2 * (100vw - 375px) / 39);
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
  }
}

@media screen and (min-width: 414px) {
  html {
    /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
    font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
    font-size: calc(18px + 4 * (100vw - 414px) / 586);
  }
}

@media screen and (min-width: 600px) {
  html {
    /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
    font-size: calc(125% + 4 * (100vw - 600px) / 400);
    font-size: calc(20px + 4 * (100vw - 600px) / 400);
  }
}

@media screen and (min-width: 1000px) {
  html {
    /* 1000px往后是每100像素0.5px增加 */
    font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
    font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
  }
}

在pages/_document.js 里面引入上面的css

// ./pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { BOOTSTRAP } from '../consts';
import { Layout } from '../components';

class MallDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="stylesheet" type="text/css" href={BOOTSTRAP}></link>
          <link rel="stylesheet" type="text/css" href='/reset.css'></link>
          <link
            rel="shortcut icon"
            href="https://img..com/kkb_portal_icon.ico"
          />
        </Head>
        <body>
          <Layout>
            <Main />
          </Layout>
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MallDocument;

西树先森
7.1k 声望926 粉丝

从事开发多年,前端、后端(go、Python、php)、服务架构都有涉猎,经历过大公司、创业公司,擅长前端及公司技术选型。