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"
}
相关推荐
王哲晓3 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4116 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v7 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云17 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058719 分钟前
web端手机录音
前端
齐 飞25 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹42 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试