vue3+vite+js 实现移动端，PC端响应式布局

马农码字

已于 2024-05-02 21:27:18 修改

阅读量1.3k

点赞数 6

分类专栏： vue框架文章标签：前端 vue

于 2024-05-01 20:50:37 首次发布

本文链接：https://blog.csdn.net/qq_43384836/article/details/138378868

版权

vue框架专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue3项目中结合amfe-flexible和postcss-pxtorem实现针对移动端和PC端的响应式设计，包括安装步骤、main.js引用、postcss.config.js配置以及使用vuex管理设备状态和自定义rem单位计算。

摘要由CSDN通过智能技术生成

目前使用的是vue3+vite，没有使用ts

纯移动端|PC端

这种适用于只适用一个端的情况
方法：amfe-flexible + postcss-pxtorem相结合
① 执行以下两个命令

npm i -S amfe-flexible
npm install postcss-pxtorem --save-dev

② main.js文件引用

import 'amfe-flexible'

③ 根目录新建一个postcss.config.js文件，文件内容如下：

// postcss.config.js
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75; // 因为vant框架是以375px的稿子为基础的，rootValue 以设计稿除以10来设置
            },
            propList: ['*'], // 需要转换的css属性，默认*全部
        }
    }
}

到这里就安装完成了，重新运行项目就可以在浏览器看到变化了

移动端+PC端

这种可用于一套UI或两套UI适配于移动端及PC端的情况
① 新建个js文件，我放在src平级下新建utils–rem.js文件
store接入可参考这篇文章

import useUserStore from "@/store/modules/userStore.js" 
const store = useUserStore()

// 获取是否为手机端
const isMobile = () => {
  const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
  return !!flag
}
export function setRem() {
  // 获取页面的宽度
  const deviceWidth = document.documentElement.clientWidth
  // 手机端  （768可自己调整）
  if (deviceWidth<=768){
    if (store) store.setDevice('mobile')  // 我这边基本每个页面都需要用到，所以存到vuex，你们可按照自己实际项目来
    document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px'  //  我这里是按照100px来的，3.75：设计稿宽度（375）/100
  } else {
  // 电脑端
    if (store) store.setDevice('pc')
    document.documentElement.style.fontSize = deviceWidth / 14.4 + 'px'
  }
}
setRem()

② 页面调用

<template>
    <div class="title">{{store.device}}</div>
</template>
<script setup>
import { computed,onMounted} from 'vue'
import useUserStore from "@/store/modules/userStore.js"
import { setRem } from '@/utils/rem.js' // 引入文件
import { debounce } from 'throttle-debounce' // 用于防抖的

const store = useUserStore()
onMounted(() => {
  window.onresize = debounce(500, () => {
    setRem()
  }, { atBegin: false })
})
</script>
<style lang="scss" scoped>
.title{
    font-size: 0.14rem;
}
</style>

这里就配置完了，如果有用到组件库的需要自己去单个适配下了
我这边移动端375设计稿字体大小为14px，PC端1440设计稿字体大小为14px
在这里插入图片描述