diff --git a/package-lock.json b/package-lock.json
index 7ff98b9..e4b4e02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "queyue-h5",
       "version": "0.1.0",
       "dependencies": {
+        "lib-flexible": "^0.3.2",
         "next": "14.1.3",
         "react": "^18",
         "react-dom": "^18"
@@ -31,7 +32,7 @@
         "postcss": "^8",
         "postcss-flexbugs-fixes": "^5.0.2",
         "postcss-preset-env": "^9.5.1",
-        "postcss-px-to-viewport": "^1.1.1",
+        "postcss-pxtorem": "^6.1.0",
         "prettier": "^3.2.5",
         "typescript": "^5.2.2",
         "unocss": "^0.58.6"
@@ -6089,6 +6090,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lib-flexible": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/lib-flexible/-/lib-flexible-0.3.2.tgz",
+      "integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg=="
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -7450,14 +7456,13 @@
         "postcss": "^8.4"
       }
     },
-    "node_modules/postcss-px-to-viewport": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
-      "integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
+    "node_modules/postcss-pxtorem": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
+      "integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
       "dev": true,
-      "dependencies": {
-        "object-assign": ">=4.0.1",
-        "postcss": ">=5.0.2"
+      "peerDependencies": {
+        "postcss": "^8.0.0"
       }
     },
     "node_modules/postcss-replace-overflow-wrap": {
diff --git a/package.json b/package.json
index 1734093..04d72fe 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint src --fix --ext .ts,.tsx,.js,.jsx,.mdx,.md,.json,.mjs --max-warnings 0"
   },
   "dependencies": {
+    "lib-flexible": "^0.3.2",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18"
@@ -32,7 +33,7 @@
     "postcss": "^8",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^9.5.1",
-    "postcss-px-to-viewport": "^1.1.1",
+    "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.2.5",
     "typescript": "^5.2.2",
     "unocss": "^0.58.6"
diff --git a/postcss.config.js b/postcss.config.js
index e782cb7..ba8c80f 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -14,24 +14,15 @@ module.exports = {
         'custom-properties': false,
       },
     },
-    'postcss-px-to-viewport': {
-      unitToConvert: 'px', // 需要转换的单位
-      viewportWidth: 375, // 设计稿宽度
-      // viewportHeight: 667, // 设计稿高度
-      unitPrecision: 5, // 单位转换后保留的精度
-      propList: ['*'], // 指定转换那些属性，这里选择所有属性
-      viewportUnit: 'vw', // 希望使用的视口单位
-      fontViewportUnit: 'vw', // 字体使用的视口单位
-      selectorBlackList: ['.max-w-screen-sm'], // 指定不转换那些选择器
-      minPixelValue: 1, // 小于或等于`1px`不转换
-      mediaQuery: false, // 是否在媒体查询中也转换`px`
-      replace: true, // 是否直接更换属性值，而不添加具有`vw`单位的新属性
-      // exclude: [/node_modules/], // 忽略`node_modules`目录下的文件
-      exclude: undefined,
-      include: undefined,
-      landscape: false, // 是否添加根据宽度来判断是否是横屏
-      landscapeUnit: 'vw',
-      landscapeWidth: 568,
+    'postcss-pxtorem': {
+      rootValue: 37.5,
+      unitPrecision: 5,
+      propList: ['*'],
+      selectorBlackList: ['.max-w-screen-sm'],
+      replace: true,
+      mediaQuery: false,
+      minPixelValue: 0,
+      exclude: '',
     },
   },
 };
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fc988ae..403a9be 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,3 +1,5 @@
+import LibFlexible from '@/components/LibFlexible';
+
 import type { Metadata, Viewport } from 'next';
 
 import './globals.css';
@@ -19,7 +21,9 @@ export const viewport: Viewport = {
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="zh-cn">
-      <body>{children}</body>
+      <body>
+        <LibFlexible>{children}</LibFlexible>
+      </body>
     </html>
   );
 }
diff --git a/src/components/JournalComment/index.tsx b/src/components/JournalComment/index.tsx
index 88d725f..ee65985 100644
--- a/src/components/JournalComment/index.tsx
+++ b/src/components/JournalComment/index.tsx
@@ -11,7 +11,7 @@ export default function JournalComment({ journalInfo }: { journalInfo: any }) {
   return (
     <section className="w-full flex items-center border-t-[0.8px] border-[#00000019] pt-[14px] pb-[35px] px-[18px] bg-white">
       <div
-        className="w-[294px] h-[38px] rounded-full bg-[#0000000c] px-[24px] flex items-center text-[15px] text-[#000000b2]"
+        className="flex-1 h-[38px] rounded-full bg-[#0000000c] px-[24px] flex items-center text-[15px] text-[#000000b2]"
         onClick={handleClick}
       >
         说点想说的
diff --git a/src/components/JournalContent/index.tsx b/src/components/JournalContent/index.tsx
index 361c1ce..5228c27 100644
--- a/src/components/JournalContent/index.tsx
+++ b/src/components/JournalContent/index.tsx
@@ -56,7 +56,7 @@ export default function JournalContent() {
       )}
       <div className={`w-full flex-1 flex-col ${loading ? 'hidden' : 'flex'}`}>
         {/* 期刊封面图 */}
-        <div className="relative w-[100vw] h-[264.84px]">
+        <div className="relative w-[100%] h-[264.84px]">
           <Image className="object-cover" unoptimized fill src={journalInfo?.image} alt="journal-cover" />
         </div>
 
diff --git a/src/components/LibFlexible/index.tsx b/src/components/LibFlexible/index.tsx
new file mode 100644
index 0000000..ebd279d
--- /dev/null
+++ b/src/components/LibFlexible/index.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export default function LibFlexible({ children }: Readonly<{ children: React.ReactNode }>) {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    const setRem = async () => {
+      await import('lib-flexible');
+      setLoaded(true);
+    };
+    setRem();
+  }, []);
+
+  return loaded ? children : null;
+}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index d66263f..ed38268 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -1,3 +1,5 @@
+declare module 'lib-flexible';
+
 interface Window {
   wx?: typeof wx; // 假设wx是微信小程序的全局对象
 }
diff --git a/yarn.lock b/yarn.lock
index 1fc660d..9e7c425 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3205,6 +3205,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lib-flexible@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.npmmirror.com/lib-flexible/-/lib-flexible-0.3.2.tgz"
+  integrity sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==
+
 lilconfig@3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-3.0.0.tgz"
@@ -3510,7 +3515,7 @@ npm-run-path@^5.1.0:
   dependencies:
     path-key "^4.0.0"
 
-object-assign@^4.1.1, object-assign@>=4.0.1:
+object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -4006,13 +4011,10 @@ postcss-pseudo-class-any-link@^9.0.1:
   dependencies:
     postcss-selector-parser "^6.0.13"
 
-postcss-px-to-viewport@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz"
-  integrity sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==
-  dependencies:
-    object-assign ">=4.0.1"
-    postcss ">=5.0.2"
+postcss-pxtorem@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz"
+  integrity sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==
 
 postcss-replace-overflow-wrap@^4.0.0:
   version "4.0.0"
@@ -4039,7 +4041,7 @@ postcss-value-parser@^4.2.0:
   resolved "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8, postcss@^8.0.3, postcss@^8.1.0, postcss@^8.1.4, postcss@^8.2, postcss@^8.4, postcss@^8.4.35, postcss@^8.4.6, postcss@>=5.0.2:
+postcss@^8, postcss@^8.0.0, postcss@^8.0.3, postcss@^8.1.0, postcss@^8.1.4, postcss@^8.2, postcss@^8.4, postcss@^8.4.35, postcss@^8.4.6:
   version "8.4.35"
   resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.35.tgz"
   integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==