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

Amodoro2024-06-11 19:44

项目截图

插件下载

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"
}