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"
}
相关推荐
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css
破无差9 小时前
《赛事报名系统小程序》
小程序·html·uniapp
Nan_Shu_61410 小时前
Web前端面试题(2)
前端
知识分享小能手10 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队11 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光11 小时前
css之一个元素可以同时应用多个动画效果
前端·css