nextjs 如何配置移动端适配

解决问题方案: 

  • 使用amfe-flexible
  • 引入postcss,使用px-to-rem、autoprefix插件

什么是amfe-flexible

淘宝提供的解决移动端适配方案, 具体参考https://github.com/amfe/article/issues/17

注意:目前官方已经明确表明,该方案存在一些问题,建议使用vw+rem的方案,后续调研

如何使用?

直接在html中直接引用amfe-flexible.js。 

在我们的项目中的配置,将amfe-flexible.js存放在根/static目录下面,在Head标签通过script标签引用

<Head>
  <title>Demo</title>
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <script src="/static/flexible/amfe-flexible.js"></script>
</Head>

什么是PostCss

概念:是一个css处理器,通过插件处理css

常用的插件: autocomplete、pxtorem、cssnext

postcss和less、sass有什么区别? 感兴趣的话,后续再延伸讨论

postcss sugarss 语法:

/* index.sss */
html,
body
  border: 0;
  font-family: 'Conv_ProximaNova-Regular', Sans-Serif !important;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  width: 100%;
/*正常的语法 index.css*/
html,
body {
  border: 0;
  font-family: 'Conv_ProximaNova-Regular', Sans-Serif !important;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  width: 100%;
}

如何使用postcss?

  1. npm install postcss-loader, postcss-pxtorem, styled-jsx-postcss, autoprefixer, sugarss
  2. 根目录创建postcss.config.js,主要使用的autoprefixer、postcss-pxtorem插件, sugarss parser看需要使用不使用,不使用的话可以直接parser: false
  3. 配置autoprefixer, 在postcss.config.js plugins中增加autoprefixer: {}, 在package.json中增加browserslist: {}
// postcss.config.js
module.exports = ({ file, options }) => {
    return {
        parser: file.extname === '.sss' ? 'sugarss' : false,
        plugins: {
            autoprefixer: {},
            'postcss-pxtorem': {
                replace: false,
                // unitPrecision: 5,
                rootValue: 16,
                // mediaQuery: false,
            }
        }
    };
};
// package.json中的browserslist配置
"browserslist": [
    "last 5 versions",
    "> 1%",
    "not ie <= 8"
],


遇到的问题

  1. ts文件中import less文件报错Cannot find module './index.less'.

解决方案, 在next-env.d.ts增加以下代码

declare module '*.less' {
    const content: any;
    export default content;
}
  1. post-css配置的时候, postcss.config.js或者next.config.js的postcssLoaderOptions 二选一(没仔细看文档浪费了挺久时间)
  2. autoprefixer配置,不要直接在postcss.config.js中配置, 配置在package.json中


暂无评论