html文件使用postcss-pxtorem适配移动端 使用tailwindcss库

项目截图

插件下载

npm i -D postcss@8.4.38 postcss-cli@10.1.0 postcss-pxtorem@6.1.0 tailwindcss@3.4.3

postcss.config.js & tailwind.config.js

postcss.config.js

const pxToRem = require('postcss-pxtorem')
module.exports = {plugins: [pxToRem({rootValue: 75,propList: ['*'],minPixelValue: 2})]
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {content: ['./index.html',],theme: {extend: {},},plugins: [],
}

package.json的scripts配置监听命令，每次修改项目注意启动监听

"useTailwindCss": "npx tailwindcss -i ./css/tailwindInput.css -o ./css/tailwindOutput.css --watch",
"usePostcss": "postcss ./css/tailwindOutput.css -o ./css/tailwindOutput.css -w",

页面大小变化修改html根元素fontSize大小

// ./js/rem.js 路径
(function (win, doc) {if (!win.addEventListener) returnfunction setFont() {let screenWidth = document.querySelector('html').offsetWidthconst baseSize = 75 // 我的设计稿是750px，如果是375px则写37.5const pageWidth = 750let fontSize = (baseSize * screenWidth) / pageWidthdocument.querySelector('html').style.fontSize = `${fontSize}px`}setFont()setTimeout(() => {setFont()}, 300)doc.addEventListener('DOMContentLoaded', setFont, false)win.addEventListener('resize', setFont, false)win.addEventListener('load', setFont, false)
})(window, document)

index.html引入资源文件

<link rel="stylesheet" href="./css/tailwindOutput.css">
<script src="./js/rem.js"></script>

---

PS

package.json文件

{"name": "xxx","version": "1.0.0","description": "","main": "postcss.config.js","dependencies": {},"devDependencies": {"postcss": "^8.4.38","postcss-cli": "^10.1.0","postcss-pxtorem": "^6.1.0","tailwindcss": "^3.4.3"},"scripts": {"useTailwindCss": "npx tailwindcss -i ./css/tailwindInput.css -o ./css/tailwindOutput.css --watch","usePostcss": "postcss ./css/tailwindOutput.css -o ./css/tailwindOutput.css -w","test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}