vue实现pc和移动端兼容响应式布局

news/2025/1/21 11:13:12/文章来源:https://www.cnblogs.com/wq805/p/18683241

1.一套代码实现pc端和移动端兼容。

(1)获取设备类型

 // main.jsnavigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)

(2)样式适配

  • 拆分两套css

    ​通过判断终端类型,加载不同的css文件,控制元素显隐

  • 媒体查询结合rem实现PC端和移动端共用一套代码的适配方

    媒体查询 @media为不同的尺寸设备应用不同的样式

    rem 是一个根据 html 根元素 font-size 计算的相对单位(让大小尺寸不一的手机都能按比例的缩放)。rem适合写固定尺寸,其余的根据需要换成flex或者百分比。

    <style scope>/* PC端的CSS样式代码 */@media screen and (max-width: 750px) {/* 移动端的CSS样式代码 */}</style>
    

      

2.一个项目两套代码,一套路由规则开发。

1)获取当前设备类型,共享给全局使用

  • pinia 中定义名为 device 的 state,用于全局共享当前设备(pc || mobile)

  • app.vue监听当前设备类型

mounted() {window.addEventListener('resize', this.resizeChange, false)
}
resizeChange () {// 判断是否是 pc 或者 移动端// 默认设置当屏幕宽度 > 1000 时,为PC端if (document.documentElement.clientWidth > 1000) {useDevice.setDevice('pc')} else {// 默认设置当屏幕宽度 <= 1000 时,为移动端useDevice.setDevice('mobile')}
},
// 也可以用机型之类的条件来判断
resizeChange () {const width = document.documentElement.clientWidth// 先判断 UA 是否为移动端设备(手机&平板)if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {this.mode = 'mobile'} else {// 如果为桌面设备,再根据页面宽度判断是否需要切换为移动端展示if (width < 992) {useDevice.setDevice('mobile')} else {useDevice.setDevice('pc')}}
}
destroyed () {window.removeEventListener('resize', this.resizeChange, false)}
  • 页面结构

            device/index.vue中使用动态组件,控制使用device/pc.vue 或device/mobile.vue。

(2) 使用 postcss-px-to-viewport 将项目中的 px 单位转换为 vw

      配置include: [/device\\m.vue/]使我们移动端代码中的 px 单位自动转换为 vw,而 pc 端的代码不受影响。

  有的使用postcss-pxtorem、amfe-flexible做Rem适配

​     amfe-flexible:根据屏幕宽度,自动设置html的font-size ​ postcss-pxtorem:自动将px单位转换成rem

(3) mixins 来优化

         pc端 和 移动端 的差别更多体现在页面元素的样式上(大小、位置、显隐),而实际的业务逻辑变化并不大。比如可以在首页 index 页面目录下添加一个 mixin.js 文件,将 device/pc.vue 和 device/mobile.vue 的公共业务逻辑抽离到该文件中,从而实现复用。

3.一个项目两套代码,两套路由规则开发

       同时兼任pc和移动适配

       通过配置两套不同路由和判断是否是移动端实现

       核心代码:*router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1]);*(区分路由)

        路由适配(路由守卫),组件适配

       比较麻烦,不推荐

 

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

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

相关文章

又一个新项目完结,炸裂!

除了全程直播讲解的、50 个小时的保姆级视频教程之外,我还写了整套文字教程(15 万多字),细致入微!大家好,我是程序员鱼皮。经过了 2 个月的爆肝,我在自己的编程导航的第 11 套有 保姆级教程 的大项目 —— 企业级智能协同云图库平台,完结啦!除了全程直播讲解的、50 个…

kylin V10 SP2 离线单机部署tidb v8.3.0

准备离线组件包 在官方下载页面选择对应版本的 TiDB server 离线镜像包(包含 TiUP 离线组件包)。需要同时下载 TiDB-community-server 软件包和 TiDB-community-toolkit 软件包。 部署离线环境TiUP组件 将离线包传至服务器,执行以下命令安装 TiUP 组件: tar zxvf tidb-comm…

生成型AI应用的质量为何常常不尽人意,以及如何改进

生成型AI应用的质量为何常常不尽人意,以及如何改进2025年,图片来源:elements.envato.com,Marcel Mller 编辑过去两年,生成型AI的热潮席卷了商业世界。这项技术可以提高业务流程的执行效率,减少等待时间,降低过程缺陷。像ChatGPT这样的接口使得与大型语言模型(LLM)的互…

C# WEB API windows server 发布注意事项

1、使用背景: 数据请求方通过接口获取数据,同时使用方通过用户名称进行功能限制;2、实现方法: C# web服务功能,不同机型使用不同接口进行数据获取,请求数据需要包含产品条码信息、请求方用户名信息; 接口请求如下: 3、部署注意事项: 在windows server IIS 管理器中添…

菜单权限的设计与实现

说明该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发)。该系统文章,我会尽量说的非常详细,做到不管新手、老手都能看懂。说明:OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。 友情提醒:本篇文章是属于系列文章,…

第十一章 成本管理(2025年详细解析版)

目录导语章节介绍什么是成本管理?关注两类成本11.1 管理基础项目成本管理的作用和意义项目成本失控原因(了解)成本类型机会成本沉没成本发展趋势和新兴实践如何计算进度偏差?11.2 项目成本管理过程过程概述项目成本管理过程裁剪时需要考虑的因素(不重要)在敏捷或适应型环…

寒假

今天继续学习Android Studio,今天学习的基础空间Button和EditText两个组件,了解了它们的属性,设计了一个简单的登录页面尝试获取前端的输入的信息,目前还未成功,经过学习,觉得融会贯通,目前认为,xml对应javaweb中的前端html页面,activity对应javaweb中的后端中的Contr…

操作系统课程设计:模拟进程调度

对 N 个进程应用模拟五种不同的进程调度算法,包括先来先服务(FCFS)、短进程优先(SJF)、时间片轮转(RR)、高响应比优先(HRRN)、动态优先级调度(PR)。2024年末《操作系统》课程设计大作业 模拟进程调度 对 N 个进程应用模拟五种不同的进程调度算法,包括先来先服务(F…

VAE模型简析和精要(原理和代码)

1. 前言 这篇博客主要用于记录VAE的原理部分。 一方面便于日后自己的温故学习,另一方面也便于大家的学习和交流。 如有不对之处,欢迎评论区指出错误,你我共同进步学习! 图均引用自4部分的博客!!!!!!! 2. 正文 这篇博客集各博客之长,比较简洁易懂:因为有的博客交代…

有效提高BT下载速度:Tracker 正确的使用知识

前言BT下载对 DHT 和 Tracker 是非常依赖,然而网上有不少的 Tracker 列表项目,每次更新都要全部添加一遍,显然很麻烦。那么就需要一个每次可以一键更新的列表页面,每天自动获取热门 Tracker 列表项目,去重复后制作成一个 Tracker 列表合集。这样你不需要去一个个添加 Trac…

通过sqlserver添加修改系统管理员账号.120510

一,思路: 在其他服务器B,通过sa账号远程登录需增加/修改系统管理员账号的服务器A,用sqlserver的xp_cmdshell功能,模拟cmd通过net user命令进行添加或者修改系统管理员账号。 特别提示:此解决方案只适用于服务器没有加域且忘记管理员密码的用户使用,请不要作为非法用途!…

MySQL架构总览_查询执行流程_SQL解析顺序

目录MySQL 架构总览查询执行流程连接处理结果SQL 解析顺序准备工作FROMWHEREGROUP BYHAVINGSELECTORDER BYLIMIT总结参考书籍 MySQL 架构总览 架构最好看图,再配上必要的说明文字。 下图根据参考书籍中一图为原本,再在其上添加上了自己的理解。从上图中我们可以看到,整个架构…