项目截图
插件下载
bash
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
js
const pxToRem = require('postcss-pxtorem')
module.exports = {
plugins: [
pxToRem({
rootValue: 75,
propList: ['*'],
minPixelValue: 2
})
]
}
tailwind.config.js
js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./index.html',
],
theme: {
extend: {},
},
plugins: [],
}
package.json的scripts配置监听命令,每次修改项目注意启动监听
json
"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
// ./js/rem.js 路径
(function (win, doc) {
if (!win.addEventListener) return
function setFont() {
let screenWidth = document.querySelector('html').offsetWidth
const baseSize = 75 // 我的设计稿是750px,如果是375px则写37.5
const pageWidth = 750
let fontSize = (baseSize * screenWidth) / pageWidth
document.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引入资源文件
html
<link rel="stylesheet" href="./css/tailwindOutput.css">
<script src="./js/rem.js"></script>
PS
package.json文件
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"
}