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

项目截图

插件下载

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"
}
相关推荐
雯0609~9 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ12 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z17 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜41 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40442 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish43 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five44 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序44 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54144 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省1 小时前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript