效果图:
步骤 1:安装 PostCSS 和 PostCSS 插件
npm install postcss postcss-pxtorem --save-dev
步骤 2:配置 nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2024-04-03',
devtools: {
enabled: false },
// 配置网站头部信息,包括 logo 和 favicon
app: {
head: {
link: [
{
rel: "icon", type: "image/x-icon", href: "/logo.ico" }
],
script: [
{
children: `
(function() {
function setRemUnit() {
var docEl = document.documentElement;
// 获取设备像素比
const pixelRatio = window.devicePixelRatio;
console.log("pixelRatio: " + pixelRatio)
// 根据设备像素比调整根字体大小
let baseFontSize = 16 * pixelRatio; // 针对高分辨率设备
console.log("baseFontSize: " + baseFontSize)
// 设置根元素的字体大小
docEl.style.fontSize = baseFontSize + 'px';
}
setRemUnit();
})();
`
}
],
meta: [
{
name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' }
]
}
},
devServer: {
host: '0.0.0.0',
port: 3000
},
css: [
'~/assets/css/tailwind.css',
'~/assets/css/style.css',
'element-plus/dist/index.css',
],
build: {
transpile: ['element-plus'],
},
site: {
//https://nuxtseo.com/
url: 'http://localhost:3000',
name: '重庆信驰科技有限公司',
description: '信驰、科技、创新、智能、高效、服务、物联网、iot、智能物联平台、软件开发、硬件设计、智能抄表、智慧燃气、燃气报警器、水表、气表、车联网、管网巡检、水务营收系统、燃气营收系统', // The description of your site, used in the meta tags.
},
// Vite 配置
vite: {
resolve: {
alias: {
'dayjs': 'dayjs/esm'
},
},
css: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-pxtorem')({
rootValue: 16,
propList: ['*'], // 转换所有属性
unitPrecision: 5, // 保留rem单位的小数位数
minPixelValue: 1, // 不转换小于1px的值
mediaQuery: true, // 是否转换媒体查询中的px
})
],
},
},
plugins: [
require('unplugin-vue-components/vite')({
resolvers: [
require('unplugin-vue-components/resolvers').ElementPlusResolver()
]
}),
require('unplugin-auto-import/vite')({
resolvers: [require('unplugin-vue-components/resolvers').ElementPlusResolver()],
})
]
},
modules: ['@nuxtjs/seo', '@nuxtjs/tailwindcss']
})