vue3实现移动端,PC端响应式布局

纯移动端|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文件

import store from '@/store/index' 
// 获取是否为手机端
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.commit('setDevice', 'mobile') // 我这边基本每个页面都需要用到,所以存到vuex,你们可按照自己实际项目来document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px'  //  我这里是按照100px来的,3.75:设计稿宽度(375)/100} else {// 电脑端if (store) store.commit('setDevice', 'pc')document.documentElement.style.fontSize = deviceWidth / 14.4 + 'px'}
}
setRem()

② 页面调用

<template><div class="title">你好世界</div>
</template>
<script setup>
import { computed,onMounted} from 'vue'
import { useStore } from 'vuex' // vuex 
import { setRem } from '@/utils/rem.js' // 引入文件
import { debounce } from 'throttle-debounce' // 用于防抖的const store = useStore()
onMounted(() => {window.onresize = debounce(500, () => {setRem()const device = computed(() => store.state.device) // 设备信息获取console.log(‘当前设备为’, device.value) // 拖拽项目可看到值变化}, { atBegin: false })
})
</script>
<style lang="scss" scoped>
.title{font-size: 0.14rem;
}
</style>

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/5650.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VS2022 .Net6.0 无法打开窗体设计器

拿Vs2022 建了个Demo&#xff0c;运行环境是net6.0-windows&#xff0c;无论双击或是右键都打不开窗体设计器 打开项目目录下的*.csproj.user <?xml version"1.0" encoding"utf-8"?> <Project ToolsVersion"Current" xmlns"htt…

CHM 创建工具

确实有一些可替代HTML Help Workshop的工具&#xff0c;它们同样能帮助你创建、编辑和编译CHM文件&#xff0c;以下是一些备选方案&#xff1a; HelpNDoc: 这是一款强大的帮助文件创作软件&#xff0c;支持包括CHM在内的多种输出格式。它拥有直观的界面&#xff0c;适合初学者和…

vue-treeselect 实现懒加载 + 远程模糊搜索 支持多选,可悬浮提示选择项所有层级 已封装为组件

今天实现一个客户单位组织树的功能&#xff0c;不限层级&#xff0c;数据量巨大&#xff0c;采用vue-treeselect 实现懒加载 远程搜索 这是vue iview组件 element的需要改一下tooltip的写法 这个支持对选择的单位全部层级进行悬浮提示&#xff08;也无法在下面下拉回显&am…

PUBG下载

https://www.pubgmobile.com/HK/events.shtml?page1&#xff08;手机版&#xff09; https://steam2.ssyxjs.cn/gameStore/detail12/2204?plan%E7%BB%9D%E5%9C%B0%E6%B1%82%E7%94%9F-18&e_creative88906878234&e_keywordid784021409904&bd_vid843425054508232313…

【Qt之·控件·样式表】

系列文章目录 文章目录 前言一、Qt样式表的基础知识1.1 Qt样式表的定义和语法规则1.2 Qt样式表中的选择器和属性1.2.1 盒子模型1.2.2 border 1.3 Qt样式表中的伪类和伪元素 二、编写基本的Qt样式表2.1 在Qt应用程序中引入样式表文件的方式2.2 设置基本的背景色、字体样式等 三、…

MacOs安装pyenv环境

pyenv介绍 Pyenv 是一个流行的 Python 版本管理工具&#xff0c;它允许你在同一台机器上安装和切换不同版本的 Python。Pyenv 的主要作用包括&#xff1a; 多版本管理: 允许你在同一台计算机上安装多个版本的 Python&#xff0c;包括官方版本、开发版本和各种发行版。这对于测试…

知识图谱与知识表示:人工智能的基石

知识图谱与知识表示&#xff1a;人工智能的基石 一、知识图谱&#xff1a;连接数据的桥梁1.1 知识图谱的构成1.2 知识图谱的应用 二、知识表示&#xff1a;AI的推理基础2.1 知识表示的定义2.2 知识表示的形式 三、从符号表示到向量表示3.1 符号表示与向量表示3.2 向量表示的优势…

搭建企业级DNS服务器真实案例精讲

搭建企业级DNS服务器真实案例精讲 1----3-2-1.1.搭建DNS服务服务器为公司的多个域名提供解析.M 2----3-2-1.2格建DNS服务服务器为公司的客不域名提供解析补 3----3-2-1.3.格建DNS服务服务器为公司的多个域名提供解析扣 4----3-2-1.4.搭建DNS服务服务器为公司的多个域名提供解析…

JAVA: Spring Boot加载 Shiro 配置 >>找不到 SecurityManager

在 Spring Boot 应用中集成和配置 Apache Shiro 通常涉及创建一个配置类来设置 SecurityManager&#xff0c;以及定义 Shiro 的 Web 支持和必要的安全策略。下面是使用 Spring Boot 配置 Apache Shiro 的步骤&#xff1a; ### 1. 添加依赖 首先&#xff0c;确保在你的 pom.xml…

跟我学C++中级篇——零长度数组

一、零长度数组 最初使用零长度数组是在串口通信和网络通信中使用的&#xff0c;它类似于下面的代码&#xff1a; struct Data {int a;char c;char buf[0]; };零长度数组又叫柔性数组&#xff0c;这个非常贴切。它早期是GNU的一个扩展&#xff0c;后来在C99中也进行了支持&am…

【经典面试题】JavaScript中的异步操作与回调地狱解决方法

JavaScript中的异步操作与回调地狱解决方法 在现代的Web开发中&#xff0c;JavaScript扮演着极为重要的角色&#xff0c;尤其是在处理网络请求、文件操作或者任何可能耗费时间的操作时。为了不阻塞程序的执行&#xff0c;JavaScript 提供了异步编程模型。本文将介绍JavaScript…

vue3 使用pinia -- vue2 vuex的plus版

接入状态store 即 vuex 呃(⊙﹏⊙)vuex这里可以略过了&#xff0c;我在研究完后&#xff0c;才发现vue3出来个pinia&#xff0c;是vuex的升级&#xff0c;体积更小更省事&#xff0c;我不删这里了&#xff0c;单纯记录下&#x1f642; --pinia用法下面有写哦 ① 执行 npm insta…

C# 实现格式化文本导入到Excel

目录 需求 Excel 的文本文件导入功能 范例运行环境 配置Office DCOM 实现 组件库引入 OpenTextToExcelFile 代码 调用 小结 需求 在一些导入功能里&#xff0c;甲方经常会给我们一些格式化的文本&#xff0c;类似 CSV 那样的纯文本。比如有关质量监督的标准文件&…

LangChain 入门6 magic不同格式文件的读取

概述&#xff1a; 除了原始文本数据&#xff0c;可能还希望从其他文件类型&#xff08;如PowerPoint演示文稿或PDF&#xff09;中提取信息。 可以使用LangChain文档加载程序将文件解析为可以输入LLM的文本格式。 基于MIME类型的解析 数据加载 import requestsresponse req…

如何理解和实现二分查找:一篇完整的解析

二分查找的基本思想 二分查找的核心思想是比较数组的中间元素与目标值。根据比较结果&#xff0c;可以排除一半的搜索空间。具体步骤如下&#xff1a; 初始化指针&#xff1a;设置两个指针&#xff0c;left 指向数组的开始位置&#xff0c;right 指向数组的结束位置。 循环搜索…

手写线程池|C语言版(二)|定义线程池的结构、创建线程池实例

文章目录 定义线程池结构任务结构体定义线程池结构体 组织头文件创建线程池实例函数原型定义线程池创建函数实现初始化线程池结构体指针初始化线程池结构体的各类参数 定义线程池的结构C代码创建线程池总体C代码 本文中&#xff0c;我们将创建线程池的结构体&#xff0c;该结构…

TCP/IP和HTTP协议

TCP/IP OSI 七层模型在提出时的出发点是基于标准化的考虑&#xff0c;而没有考虑到具体的市场需求&#xff0c;使得该模型结构复杂&#xff0c;部分功能冗余&#xff0c;因而完全实现 OSI 参考模型的系统不多。而 TCP/IP 参考模型直接面向市场需求&#xff0c;实现起来也比较…

一文掌握:Clipboard API ,让前端顺畅操作剪贴板,无论怎么复制,都显示你网站信息。

一、Clipboard API是什么 Clipboard API 是一个 Web API&#xff0c;它提供了一种在网页上读取和写入剪贴板内容的方式。通过 Clipboard API&#xff0c;网页可以访问用户的剪贴板&#xff0c;从中读取文本、图像或其他数据&#xff0c;并且可以将数据写入剪贴板&#xff0c;以…

FFmpeg基础知识详解:音频视频处理的强大工具

FFmpeg&#xff0c;这个强大的开源多媒体框架&#xff0c;已经成为全球范围内音频、视频处理和流媒体传输领域的基石。它集合了音频解码、编码、转码、混合、抓取、流化等多种功能于一身&#xff0c;几乎能满足任何与音视频处理相关的技术需求。本文将带你走进FFmpeg&#xff0…

2024五一杯C题思路代码文章成品分享:煤矿深部开采冲击地压危险预测

提供的数据分为五类&#xff1a; A:正常工作数据 B:前兆特征数据 C:干扰信号数据 D:传感器断线数据 E:工作面休息数据 任务细节&#xff1a; 任务1&#xff1a; 分析含干扰的电磁辐射和声发射信号&#xff0c;识别干扰信号的特征&#xff0c;并利用这些特征在特定时间段…