queyue-frontend
/
queyue-h5
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: change postcss-px-to-viewport to postcss-pxtorem

Browse Source
main
fadeaway 6 months ago
parent 346ce9f158
commit cd4487c102
9 changed files with 61 additions and 39 deletions
Show Stats Download Patch File Download Diff File

21
package-lock.json generated
Unescape View File

@ -8,6 +8,7 @@
"name": "queyue-h5", "name": "queyue-h5",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"lib-flexible": "^0.3.2",
"next": "14.1.3", "next": "14.1.3",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18"
@ -31,7 +32,7 @@
"postcss": "^8", "postcss": "^8",
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^9.5.1", "postcss-preset-env": "^9.5.1",
"postcss-px-to-viewport": "^1.1.1", "postcss-pxtorem": "^6.1.0",
"prettier": "^3.2.5", "prettier": "^3.2.5",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"unocss": "^0.58.6" "unocss": "^0.58.6"
@ -6089,6 +6090,11 @@
"node": ">= 0.8.0" "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": { "node_modules/lines-and-columns": {
"version": "1.2.4", "version": "1.2.4",
"resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@ -7450,14 +7456,13 @@
"postcss": "^8.4" "postcss": "^8.4"
} }
}, },
"node_modules/postcss-px-to-viewport": { "node_modules/postcss-pxtorem": {
"version": "1.1.1", "version": "6.1.0",
"resolved": "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz", "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
"integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==", "integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
"dev": true, "dev": true,
"dependencies": { "peerDependencies": {
"object-assign": ">=4.0.1", "postcss": "^8.0.0"
"postcss": ">=5.0.2"
} }
}, },
"node_modules/postcss-replace-overflow-wrap": { "node_modules/postcss-replace-overflow-wrap": {

3
package.json
Unescape View File

@ -9,6 +9,7 @@
"lint": "eslint src --fix --ext .ts,.tsx,.js,.jsx,.mdx,.md,.json,.mjs --max-warnings 0" "lint": "eslint src --fix --ext .ts,.tsx,.js,.jsx,.mdx,.md,.json,.mjs --max-warnings 0"
}, },
"dependencies": { "dependencies": {
"lib-flexible": "^0.3.2",
"next": "14.1.3", "next": "14.1.3",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18"
@ -32,7 +33,7 @@
"postcss": "^8", "postcss": "^8",
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^9.5.1", "postcss-preset-env": "^9.5.1",
"postcss-px-to-viewport": "^1.1.1", "postcss-pxtorem": "^6.1.0",
"prettier": "^3.2.5", "prettier": "^3.2.5",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"unocss": "^0.58.6" "unocss": "^0.58.6"

27
postcss.config.js
Unescape View File

@ -14,24 +14,15 @@ module.exports = {
'custom-properties': false, 'custom-properties': false,
}, },
}, },
'postcss-px-to-viewport': { 'postcss-pxtorem': {
unitToConvert: 'px', // 需要转换的单位 rootValue: 37.5,
viewportWidth: 375, // 设计稿宽度 unitPrecision: 5,
// viewportHeight: 667, // 设计稿高度 propList: ['*'],
unitPrecision: 5, // 单位转换后保留的精度 selectorBlackList: ['.max-w-screen-sm'],
propList: ['*'], // 指定转换那些属性，这里选择所有属性 replace: true,
viewportUnit: 'vw', // 希望使用的视口单位 mediaQuery: false,
fontViewportUnit: 'vw', // 字体使用的视口单位 minPixelValue: 0,
selectorBlackList: ['.max-w-screen-sm'], // 指定不转换那些选择器 exclude: '',
minPixelValue: 1, // 小于或等于`1px`不转换
mediaQuery: false, // 是否在媒体查询中也转换`px`
replace: true, // 是否直接更换属性值，而不添加具有`vw`单位的新属性
// exclude: [/node_modules/], // 忽略`node_modules`目录下的文件
exclude: undefined,
include: undefined,
landscape: false, // 是否添加根据宽度来判断是否是横屏
landscapeUnit: 'vw',
landscapeWidth: 568,
}, },
}, },
}; };

6
src/app/layout.tsx
Unescape View File

@ -1,3 +1,5 @@
import LibFlexible from '@/components/LibFlexible';
import type { Metadata, Viewport } from 'next'; import type { Metadata, Viewport } from 'next';
import './globals.css'; import './globals.css';
@ -19,7 +21,9 @@ export const viewport: Viewport = {
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
return ( return (
<html lang="zh-cn"> <html lang="zh-cn">
<body>{children}</body> <body>
<LibFlexible>{children}</LibFlexible>
</body>
</html> </html>
); );
} }

2
src/components/JournalComment/index.tsx
Unescape View File

@ -11,7 +11,7 @@ export default function JournalComment({ journalInfo }: { journalInfo: any }) {
return ( return (
<section className="w-full flex items-center border-t-[0.8px] border-[#00000019] pt-[14px] pb-[35px] px-[18px] bg-white"> <section className="w-full flex items-center border-t-[0.8px] border-[#00000019] pt-[14px] pb-[35px] px-[18px] bg-white">
<div <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} onClick={handleClick}
> >
说点想说的 说点想说的

2
src/components/JournalContent/index.tsx
Unescape View File

@ -56,7 +56,7 @@ export default function JournalContent() {
)} )}
<div className={`w-full flex-1 flex-col ${loading ? 'hidden' : 'flex'}`}> <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" /> <Image className="object-cover" unoptimized fill src={journalInfo?.image} alt="journal-cover" />
</div> </div>

17
src/components/LibFlexible/index.tsx
Unescape View File

@ -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;
}

2
src/types/index.d.ts vendored
Unescape View File

@ -1,3 +1,5 @@
declare module 'lib-flexible';
interface Window { interface Window {
wx?: typeof wx; // 假设wx是微信小程序的全局对象 wx?: typeof wx; // 假设wx是微信小程序的全局对象
} }

20
yarn.lock
Unescape View File

@ -3205,6 +3205,11 @@ levn@^0.4.1:
prelude-ls "^1.2.1" prelude-ls "^1.2.1"
type-check "~0.4.0" 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: lilconfig@3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-3.0.0.tgz" resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-3.0.0.tgz"
@ -3510,7 +3515,7 @@ npm-run-path@^5.1.0:
dependencies: dependencies:
path-key "^4.0.0" path-key "^4.0.0"
object-assign@^4.1.1, object-assign@>=4.0.1: object-assign@^4.1.1:
version "4.1.1" version "4.1.1"
resolved "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz" resolved "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz"
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@ -4006,13 +4011,10 @@ postcss-pseudo-class-any-link@^9.0.1:
dependencies: dependencies:
postcss-selector-parser "^6.0.13" postcss-selector-parser "^6.0.13"
postcss-px-to-viewport@^1.1.1: postcss-pxtorem@^6.1.0:
version "1.1.1" version "6.1.0"
resolved "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz" resolved "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz"
integrity sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ== integrity sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==
dependencies:
object-assign ">=4.0.1"
postcss ">=5.0.2"
postcss-replace-overflow-wrap@^4.0.0: postcss-replace-overflow-wrap@^4.0.0:
version "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" resolved "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== 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" version "8.4.35"
resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.35.tgz" resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.35.tgz"
integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA== integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==

Write Preview
Loading…
Cancel
Save