nextjs移动端开发总结

移动端rem适配

1.让font-size随页面的宽度改变而改变
这里使用lib-flexible插件

yarn add lib-flexible

由于nextjs是服务端渲染，没有window对象
这里封装了一个方法来解决这一问题

import { useEffect } from 'react'
export default function useRem() {
  const setRem = async () => {
    await require('lib-flexible')
  }
  useEffect(() => {
    setRem()
    window.addEventListener('resize', setRem)
  }, [])
}

在_app.tsx中运行即可

2.让写入的px自动转为rem
这里安装postcss、autoprefixer和postcss-pxtorem
在根目录新建配置文件postcss.config.js
写入下面的配置文件即可

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'],
    },
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 37.5,
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0,
      exclude: '',
    },
  },
}

不同终端字体文体

在body中加入css语句

font-family: -apple-system, BlinkMacSystemFont, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
    'WenQuanYi Micro Hei', Helvetica, Arial, sans-serif;

苹果底部黑条问题

在要太高的元素中加入下面的css样式

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

同时要在head上添加viewport标签

<meta name="viewport"content="viewport-fit=cover"></meta>