使用postcss-pxtorem做全站页面兼容

babel.config.json

@@ -3,6 +3,18 @@
     "plugins": [
       [
         "styled-components",{ "ssr":true }
+      ],
+      [
+        "styled-components-px2rem",
+        {
+          "rootValue": 1,
+          "unitPrecision": 5,
+          "propList": ["*"],
+          "selectorBlackList": [], //排除html样式
+          "replace": true,
+          "mediaQuery": false,
+          "minPixelValue": 0
+        }
       ]
     ]
   }
\ No newline at end of file

components/layout/index.module.scss

+.content{
+  min-height: 120px;
+  line-height: 1;
+  width: 1200px;
+  position: relative;
+  margin: 0 auto;
+}
\ No newline at end of file

components/layout/index.tsx

@@ -3,6 +3,7 @@ import { Layout, Space } from "antd";
 import NavHeader from "~/components/NavHeader";
 import FooterView from "~/components/footer";
 import {useRouter} from 'next/router'
+import styles from './index.module.scss';
 
 const { Header, Footer, Content } = Layout;
 
@@ -58,9 +59,15 @@ export default function LayoutView(props: Props) {
         <Header style={headerStyle}>
           <NavHeader />
         </Header>
-        <Content style={contentStyle}>{props.children}</Content>
+        <Content className={styles.content}>{props.children}</Content>
         {!props.hideFooter && (
-          <Footer style={router.pathname.includes("home") ? {...footerStyle,...homeStyle} : footerStyle}>
+          <Footer
+            style={
+              router.pathname.includes("home")
+                ? { ...footerStyle, ...homeStyle }
+                : footerStyle
+            }
+          >
             <FooterView></FooterView>
           </Footer>
         )}

components/loginModal/index.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { Modal, Image } from "antd";
 import api from "~/api";
 import { UserContext } from "~/lib/userProvider";
+import errImg from "~/assets/errImg";
 
 type Props = {
   open: boolean;
@@ -27,6 +28,7 @@ export default function LoginModal(props: Props) {
       });
     } */
     if (!props.open) {
+      setQrCode("");
       return;
     }
 
@@ -38,6 +40,8 @@ export default function LoginModal(props: Props) {
       .then((res) => {
         if (res.code == "200") {
           setQrCode("data:image/png;base64," + res.result || "");
+        } else {
+          window.messageApi.error("获取登录二维码失败");
         }
       });
   }, [props.open]);
@@ -97,7 +101,12 @@ export default function LoginModal(props: Props) {
           欢迎来到云享飞
         </div>
         <div id="login_container" style={{ margin: "auto", display: "table" }}>
-          <Image src={qrCode} width={150} height={150}></Image>
+          <Image
+            src={qrCode}
+            width={150}
+            height={150}
+            fallback={errImg}
+          ></Image>
         </div>
         <div
           style={{

package.json

@@ -34,12 +34,14 @@
     "@hapi/iron": "^7.0.1",
     "@types/styled-components": "^5.1.26",
     "babel-plugin-styled-components": "^2.1.1",
+    "babel-plugin-styled-components-px2rem": "^1.5.5",
     "cookie": "^0.5.0",
     "moment": "^2.29.4",
     "next-connect": "^1.0.0",
     "passport": "^0.6.0",
     "passport-local": "^1.0.0",
     "pinyin-pro": "^3.14.0",
+    "postcss-pxtorem": "^6.0.0",
     "react-infinite-scroll-component": "^6.1.0",
     "styled-components": "^6.0.0-rc.1",
     "swiper": "^9.3.2",

pages/_app.page.tsx

-import '../public/antd.min.css';
-import '../styles/index.scss';
-import type { AppProps } from 'next/app';
-import withTheme from '../theme';
-import { message } from 'antd';
-import { useEffect } from 'react';
+import "../public/antd.min.css";
+import "../styles/index.scss";
+import type { AppProps } from "next/app";
+import withTheme from "../theme";
+import { message } from "antd";
+import { useEffect } from "react";
 import Head from "next/head";
-import Script from 'next/script';
+import Script from "next/script";
 import UserProvider, { UserContext } from "~/lib/userProvider";
 
 export default function App({ Component, pageProps }: AppProps) {
@@ -13,14 +13,18 @@ export default function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
     //全局消息提示
     window.messageApi = messageApi;
-  }, [])
+    //@ts-ignore
+    window.onresize = function(){
+      window.document.querySelector('html')!.style.fontSize = (window.innerWidth / 1920) + 'PX';
+    }
+  }, []);
 
   return withTheme(
     <>
       <Head>
         <meta
           name="viewport"
-          content="width=device-width,initial-scale=1"
+          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
         ></meta>
       </Head>
       <Script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></Script>

pages/_document.page.tsx

@@ -24,7 +24,7 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <Html lang='en'>
+      <Html lang='en' style={{fontSize: 1}}>
         <Head />
         <body>
           <Main />

postcss.config.js

+module.exports = {
+  plugins: {
+    "postcss-pxtorem": {
+      rootValue: 1,
+      unitPrecision: 5,
+      propList: ["*"],
+      selectorBlackList: [], //排除html样式
+      replace: true,
+      mediaQuery: false,
+      minPixelValue: 0,
+    },
+  },
+};