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

news2024/9/20 0:58:24

目前使用的是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
在这里插入图片描述

在这里插入图片描述

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

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

相关文章

[一本Java+一本Java]5月7日简历指导直播

一、直播预告 每周二、四、六16:30简历指导直播&#xff0c;前美团项目负责人、校招VIP CEO-大拿老师在线讲简历优化 二、简历内容 三、简历核心问题 【简历1】一本- Java 1 虽然项目名称有一定的包装&#xff0c;两个项目的内容都是一眼能看出来的烂大街的项目&#xff0c…

游戏辅助 -- 实战找人物对象基址

本节课在线学习视频&#xff1a; https://pan.quark.cn/s/3e83f4568031 一、打开CE工具&#xff0c;加载游戏进程 二、搜索人物血量144&#xff0c;选择首次扫描 三、进入游戏&#xff0c;让人物血量发生变化&#xff0c;搜索减少的数值 四、发现绿色的数值&#xff0c;一般绿…

uniapp日期区间选择器

uniapp日期区间选择器 在 uniapp 中创建一个简单的自定义日期范围的日期区间选择器&#xff1a; - 限制有效日期范围开始日期为 2024-01-01&#xff0c;结束日期为当日&#xff1b; - 默认日期区间为当日向前计算的7日区间&#xff1b; - 选择开始时间后&#xff0c;判断不可大…

预定类小程序源码搭建包含各行业+源码开源可二开+详细图文搭建部署教程

在数字化浪潮席卷的今天&#xff0c;各行各业都急需找到与顾客连接的新方式。为了满足这一需求&#xff0c;很多店铺和企业都推出了预定类小程序&#xff0c;分享一款开源版预订类小程序源码&#xff0c;一站式解决方案&#xff0c;覆盖餐饮、旅游、美容、医疗、教育等多个行业…

vue-img-cutter 图片裁剪详解

前言&#xff1a;vue-img-cutter 文档&#xff0c;本文档主要讲解插件在 vue3 中使用。 一&#xff1a;安装依赖 npm install vue-img-cutter # or yarn add vue-img-cutter # or pnpm add vue-img-cutter 二&#xff1a;构建 components/ImgCutter.vue 组件 <script se…

罗德与施瓦茨 SMC100A信号发生器9kHz至3.2 GHz

罗德与施瓦茨 SMC100A信号发生器&#xff0c;9 kHz - 3.2 GHz 罗德与施瓦茨 SMC100A 以极具吸引力的价格提供出色的信号质量。它覆盖的频率范围为 9 kHz 至 1.1 GHz 或 3.2 GHz。输出功率为典型值。> 17 dBm。所有重要功能&#xff08;AM/FM/φM/脉冲调制&#xff09;均已集…

视频素材哪个app好?8个视频素材库免费使用

视频内容已成为现代传播中不可或缺的一部分&#xff0c;具备卓越的视频素材对于提升任何媒体作品的质量和吸引力尤为关键。这里列举的一系列精挑细选的全球视频素材网站&#xff0c;旨在为您的商业广告、社交媒体更新或任何其他类型的视觉项目提供最佳支持。 1. 蛙学府&#x…

力扣顺序表思路讲解

本篇文章&#xff0c;我给大家带来的是顺序表题目讲解&#xff0c;希望大家看完有所收获&#xff0c;废话不多说&#xff0c;我们现在开始 审题 大白话&#xff1a;给了一个数组和一个目标值。如果数组里的两个元素相加 目标值&#xff0c;则返回这两个元素的下标。那么大家需…

Xinstall:专业的APP全渠道统计服务商,助力广告数据分析

在移动互联网时代&#xff0c;APP已成为企业营销的重要阵地。然而&#xff0c;随着竞争加剧&#xff0c;广告主们面临着如何精准衡量广告投放效果、优化投放策略等挑战。这时&#xff0c;专业的APP全渠道统计服务商——Xinstall便成为了广告主们的得力助手。 Xinstall作为国内…

EtherCAT开发_4_分布时钟知识点摘抄笔记1

分布时钟 (DC&#xff0c;Distributed Cl ock) 可以使所有EtherCAT设备使用相同的系统时间&#xff0c;从而控制各设备任务的同步执行。从站设备可以根据同步的系统时间产生同步信号&#xff0c;用于中断控制或触发数字量输入输出。支持分布式时钟的从站称为 DC 从站。分布时钟…

消费金融平台公司如何做大做强自营产品

本文来自于2019年的某次内部分享沟通会&#xff0c;部分敏感内容已做删减。

Ubuntu进行换源

各种源大全 在此地 // 此源均只适用Ubuntu 18.04 版本&#xff0c;其他版本需要修改 bionic 为对应的Ubuntu版本#阿里云源地址 deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ bionic-security ma…

springboot3 集成spring-authorization-server (一 基础篇)

官方文档 Spring Authorization Server 环境介绍 java&#xff1a;17 SpringBoot&#xff1a;3.2.0 SpringCloud&#xff1a;2023.0.0 引入maven配置 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter…

ComfyUI的图像调色处理

可知这个节点可以让一张图片根据另外一张图片进行调色&#xff0c;我上传其他图片再来看看效果&#xff0c;如下 【保姆级教程】ComfyUI中常见的十几种多图处理节点&#xff0c;包括图像填充、图像拼接、图像混合等等 工作流链接 更多好玩且实用AIGC工作流和节点 星球号&#…

java中的变量、数据类型、人机交互

变量 变量要素 1、类型&#xff1b;每一个变量都需要定义类型&#xff08;强类型&#xff09;其它语言有弱类型&#xff08;js&#xff09; 2、变量名&#xff1b; 3、存储的值&#xff1b; 声明方式&#xff1a; 数据类型 变量名 变量值&#xff1b; public static vo…

最好用的长线预警指标Lon 一键导入QMT

长线指标&#xff08;LON)是一种加权的量价指标&#xff0c;其作用在于测量近期资金动向。属于中长线趋势类指标。 LON长线指标表现形式类似平滑异同移动平均线&#xff08;MACD&#xff09;和三重指数平滑移动平均指标&#xff08;TRIX&#xff09;等趋势型指标&#xff0c;但…

RTSP/Onvif安防监控系统EasyNVR级联视频上云系统EasyNVS报错“Login error”的原因排查与解决

EasyNVR安防视频云平台是旭帆科技TSINGSEE青犀旗下支持RTSP/Onvif协议接入的安防监控流媒体视频云平台。平台具备视频实时监控直播、云端录像、云存储、录像检索与回看、告警等视频能力&#xff0c;能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、W…

Day_2

1. 菜品管理 新增菜品 接口设计 1. 根据类型查询分类&#xff08;分类管理已完成&#xff09; 查看接口文档即可 2. 文件上传 创建Bucket 采用的是阿里云的OSS对象存储服务 新增AccessKey 3. 菜品的新增逻辑 代码开发 1. 文件上传接口开发 为了提高代码的解耦性&#…

虚拟机文件夹共享操作(本地访问)

新建一个文件夹 右击文件夹点击属性 找到共享 点击共享 选择本地用户共享就可以了 本地winr 输入我们图片中的格式&#xff08;IP前加 “\\” &#xff09; 会弹一个窗口&#xff0c;输入虚拟机的入户名和密码就可以共享了&#xff08;一般默认用户名都是administrator&am…

C# winform 连接mysql数据库(navicat)

1.解决方案资源管理器->右键->管理NuGet程序包->搜索&#xff0c; 安装Mysql.Data 2.解决方案资源管理器->右键->添加->引用->浏览-> C:\Program Files (x86)\MySQL\MySQL Installer for Windows ->选择->MySql.Data.dll 3.解决方案资源管理器…