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"
}
相关推荐
Mintopia几秒前
🧩 Next.js在国内环境的登录机制设计:科学、务实、又带点“国风味”的安全艺术
前端·javascript·全栈
雨过天晴而后无语12 分钟前
Windchill中MVC选中事件级联另一MVC内容
java·javascript·html·mvc
qq. 280403398413 分钟前
react hooks
前端·javascript·react.js
LHX sir1 小时前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web
Gazer_S1 小时前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js
小光学长1 小时前
基于Vue的图书馆座位预约系统6emrqhc8(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Y学院1 小时前
vue的组件通信
前端·javascript·vue.js
PairsNightRain2 小时前
React Concurrent Mode 是什么?怎么使用?
前端·react.js·前端框架
小岛前端2 小时前
React 剧变!
前端·react.js·前端框架
teeeeeeemo2 小时前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js