Created
December 31, 2019 08:18
-
-
Save wsdo/f542befef6e29892671a4fe42d18ca77 to your computer and use it in GitHub Desktop.
在nextjs项目里面配置px转rem插件:postcss-pxtorem
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| * @Author: starkwang | |
| * @Contact me: https://shudong.wang/about | |
| * @Date: 2019-11-29 12:16:29 | |
| * @LastEditors: starkwang | |
| * @LastEditTime: 2019-11-29 12:17:19 | |
| * @Description: 在nextjs项目里面配置px转rem插件:postcss-pxtorem | |
| --> | |
|  | |
| > 本文首发：https://shudong.wang/10675.html | |
| > nextjs-kit脚手架 :[bnextjs-kit脚手架](https://github.com/nextjs-top/nextjs-kit.git) | |
| ## 在nextjs.config里面的stylus配置 添加上 postcssLoaderOptions选项 | |
| ``` | |
| ... | |
| [ | |
| stylus, | |
| { | |
| cssModules: true, | |
| cssLoaderOptions: { | |
| importLoaders: 1, | |
| localIdentName | |
| }, | |
| postcssLoaderOptions: { | |
| // parser: 'sugarss', | |
| config: { | |
| ctx: { | |
| theme: JSON.stringify(process.env.REACT_APP_THEME) | |
| } | |
| } | |
| } | |
| } | |
| ], | |
| ``` | |
| ## 在项目里面增加postcss.config.js 文件 | |
| ``` | |
| module.exports = { | |
| plugins: [ | |
| require('postcss-flexbugs-fixes'), | |
| require('postcss-preset-env')({ | |
| autoprefixer: { | |
| flexbox: 'no-2009' | |
| }, | |
| stage: 3 | |
| }), | |
| require('postcss-pxtorem')({ | |
| rootValue: 16, | |
| unitPrecision: 5, | |
| mediaQuery: false, | |
| minPixelValue: 0, | |
| propList: [ | |
| '*background*', | |
| '*padding*', | |
| '*margin*', | |
| 'letter-spacing', | |
| '*width', | |
| 'left', | |
| 'font*', | |
| 'right', | |
| 'top', | |
| 'bottom' | |
| ] | |
| }) | |
| ] | |
| }; | |
| ``` | |
| ## 在项目public里面创建 reset.css | |
| ```css | |
| html { | |
| font-size: 16px; | |
| } | |
| @media screen and (min-width: 375px) { | |
| html { | |
| /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */ | |
| font-size: calc(100% + 2 * (100vw - 375px) / 39); | |
| font-size: calc(16px + 2 * (100vw - 375px) / 39); | |
| } | |
| } | |
| @media screen and (min-width: 414px) { | |
| html { | |
| /* 414px-1000px每100像素宽字体增加1px(18px-22px) */ | |
| font-size: calc(112.5% + 4 * (100vw - 414px) / 586); | |
| font-size: calc(18px + 4 * (100vw - 414px) / 586); | |
| } | |
| } | |
| @media screen and (min-width: 600px) { | |
| html { | |
| /* 600px-1000px每100像素宽字体增加1px(20px-24px) */ | |
| font-size: calc(125% + 4 * (100vw - 600px) / 400); | |
| font-size: calc(20px + 4 * (100vw - 600px) / 400); | |
| } | |
| } | |
| @media screen and (min-width: 1000px) { | |
| html { | |
| /* 1000px往后是每100像素0.5px增加 */ | |
| font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000); | |
| font-size: calc(22px + 6 * (100vw - 1000px) / 1000); | |
| } | |
| } | |
| ``` | |
| ## 在pages/_document.js 里面引入上面的css | |
| ``` | |
| // ./pages/_document.js | |
| import Document, { Html, Head, Main, NextScript } from 'next/document'; | |
| import { BOOTSTRAP } from '../consts'; | |
| import { Layout } from '../components'; | |
| class MallDocument extends Document { | |
| render() { | |
| return ( | |
| <Html> | |
| <Head> | |
| <link rel="stylesheet" type="text/css" href={BOOTSTRAP}></link> | |
| <link rel="stylesheet" type="text/css" href='/reset.css'></link> | |
| <link | |
| rel="shortcut icon" | |
| href="https://img..com/kkb_portal_icon.ico" | |
| /> | |
| </Head> | |
| <body> | |
| <Layout> | |
| <Main /> | |
| </Layout> | |
| <NextScript /> | |
| </body> | |
| </Html> | |
| ); | |
| } | |
| } | |
| export default MallDocument; | |
| ``` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment