nuxt3适配移动端

Amodoro

已于 2025-02-20 15:54:05 修改

阅读量2.5k

点赞数 1

分类专栏： nuxt 文章标签：前端 nuxt3 nuxt移动端 nuxt3移动端

于 2023-05-22 12:03:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40230735/article/details/130804419

版权

nuxt 专栏收录该内容

9 篇文章

订阅专栏

文章介绍了两种在Nuxt.js项目中处理CSS像素单位转换的方案。方案一使用postcss-px-to-viewport处理视口单位，方案二结合autoprefixer和postcss-pxtorem实现px转rem，并提供了屏幕适配的JavaScript代码。这些方法有助于优化移动端页面的响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方案1

postcss-px-to-viewport-8-plugin

npm install postcss-px-to-viewport-8-plugin -D

在这里插入图片描述

export default defineNuxtConfig({
	....
	postcss: {
    plugins: {
      "postcss-px-to-viewport-8-plugin": {
      	// 配置参数使用与 postcss-px-to-viewport 一致
        viewportWidth: 750,
        exclude: /node_modules/
      },
    },
  },
})

方案2

npm安装

npm i autoprefixer postcss postcss-pxtorem

在这里插入图片描述

nuxt.config.ts配置

export default defineNuxtConfig({
	...
    postcss: {
        plugins: {
            // 这个工具可以实现自动添加CSS3前缀
            "autoprefixer": {
                overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]
            },
            'postcss-pxtorem': {
                rootValue: 37.5, // 指定转换倍率，我现在设置这个表示1rem=37.5px;
                // 如果设计稿的尺寸不是 375，而是 750(rootValue = 75) 或其他大小
                //rootValue({ file }) {
		        //	return file.indexOf('vant') !== -1 ? 37.5 : 75;
		      	//},
                propList: ['*'], // 属性列表，表示你要把哪些css属性的px转换成rem，这个*表示所有
                mediaQuery: true, // 是否允许使用媒体查询，false媒体查询的代码可用，true不可用
                exclude: 'ignore',
                replace: true, // 替换包含rem的规则，而不是添加回退
                minPixelValue: 1, // 需要转换的最小值，一般1px像素不转换，以上才转换
                unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
                selectorBalckList: ["van", 'el'], // 匹配不被转换为rem的选择器
            },
        },
    },
})

/plugins/rem.client.ts

export default defineNuxtPlugin(() => {
    if (process.client) {
        // 屏幕适应
        (function (win, doc) {
            if (!win.addEventListener) return
            function setFont() {
                let screenWidth = document.querySelector('html').offsetWidth
                const baseSize = 37.5 // 如果设计稿的尺寸不是 375，而是 750 或其他大小
                const pageWidth = 375
                let fontSize = (baseSize * screenWidth) / pageWidth
                fontSize = fontSize >= 37.5 ? 37.5 : fontSize
                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)
    }
})