Vue3(开发h5适配)

news2024/11/17 9:44:00

在开发移动端的时候需要适配各种机型,有大的,有小的,我们需要一套代码,在不同的分辨率适应各种机型。

因此我们需要设置meta标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

移动设备具有各种不同的屏幕尺寸和分辨率,例如智能手机和平板电脑。为了提供更好的用户体验,网页需要根据设备的屏幕宽度进行自适应布局。如果不设置width=device-width,移动设备会按照默认的视口宽度(通常是较宽的桌面屏幕)来渲染网页,导致网页内容在移动设备上显示不正常,可能出现内容被截断或需要水平滚动的情况

然后我们实现一个经典的圣杯布局

圣杯布局:在CSS中,圣杯布局是指两边盒子宽度固定,中间盒子自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染;

圣杯布局

<template>
  <div>
    <header>
      <div>left</div>
      <div>center</div>
      <div>right</div>
    </header>
  </div>
</template>
header {
  display: flex;
  justify-content: space-between;
 
  div {
    height: 50px;
    color: white;
    text-align: center;
    line-height: 50px;
  }

  div:nth-child(1) {
    width: 100px;
    background: red;
  }

  div:nth-child(2) {
    flex: 1;
    background: green;
  }

  div:nth-child(3) {
    width: 100px;
    background: blue;
  }
}

正常手机看着也还行

image.png

但是如果是小手机就会有问题 很挤

image.png

自适应

发现px是相对单位固定的,无法进行自适应,不会随着屏幕尺寸的改变而改变。

rem 是根据html的font-size 进行缩放的,可以进行自适应,缺点就是需要计算每个屏幕大小所对应的font-size

vw vh是相对viewport 视口的单位,配合meta标签可以直接使用,无需计算

1vw=1/100视口宽度

1vh=1/100视口高度

当前屏幕视口是375像素,1vw就是3.75像素

现在知道了用什么单位,但是我们还要根据px去换算vw就很麻烦,能不能自动转换???

postCss

https://cn.vitejs.dev/config/shared-options.html#css-postcss

发现vite已经内置了postCss

https://www.postcss.com.cn/

postCss 提供了 把Css 转换AST的能力,类似于Babel,为此我们可以编写一个插件用于将px转换为vw

npm init vue

构建一个vue项目

根目录新建一个plugins文件夹新建两个文件pxto-viewport.ts type.ts

然后在 tsconfig.node.json 的includes 配置 "plugins/**/*",

compilerOptions 配置 noImplicitAny:false

image.png

pxto-viewport.js

import type { Options } from './type'
import type { Plugin } from 'postcss'
const defaultOptions = {
    viewPortWidth: 375,
    mediaQuery: false,
    unitToConvert:'px'
}
export const pxToViewport = (options: Options = defaultOptions): Plugin => {
    const opt = Object.assign({}, defaultOptions, options)
    return {
        postcssPlugin: 'postcss-px-to-viewport',
        //css节点都会经过这个钩子
        Declaration(node) {
            const value = node.value
            //匹配到px 转换成vw
            if (value.includes(opt.unitToConvert)) {
                const num = parseFloat(value)
                const transformValue = (num / opt.viewPortWidth) * 100
                node.value = `${transformValue.toFixed(2)}vw` //转换之后的值
            }    
        },
    }
}

type.ts

export interface Options {
    viewPortWidth?: number;
    mediaQuery?: boolean;
    unitToConvert?: string;
}

vite.config.ts 引入我们写好的插件

  css:{
     postcss:{
         plugins:[
            pxToViewport()
         ]
     },
  },

image.png

这样的话各种屏幕都差不多了。

额外的小知识

比如要增加一个 可以设置全局的字体大小 或者全局背景颜色切换应该怎么做呢?

  1. 安装vueUse
npm i  @vueuse/core
  1. 定义Css变量
:root {
  --size: 14px;
}
div {
    height: 50px;
    color: white;
    text-align: center;
    line-height: 50px;
    font-size: var(--size);
}
  1. 切换字体大小
  <div>
      <button @click="change(36)"></button>
      <button @click="change(24)"></button>
      <button @click="change(14)"></button>
    </div>
import { useCssVar } from '@vueuse/core'
const change = (str: number) => {
  const color = useCssVar('--size')
  color.value = `${str}px`
}

useCssVar 的底层原理就是

document.documentElement.style.getPropertyValue('--size')
读取就是get设置就是set 只要想切换的页面用这个css变量就可以了,如果想持久存储就用localstorage

image.png

image.png

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

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

相关文章

解决Spring Boot项目中pom.xml环境配置 打包后生效 但idea版本运行无效的问题

上文 Spring Boot中通过maven进行多环境配置 中我们通过pom.xml配置了环境选择 但这个只有在打包出来的jar中生效 我们直接通过 idea启动 这个东西确实是有点问题 其实 我们执行一下 compile 手工编译一下 然后重新启动 很明显 我们这里配置就已经生效了 这个就是 我们每次…

8.7.tensorRT高级(3)封装系列-调试方法、思想讨论

目录 前言1. 模型调试技巧总结 前言 杜老师推出的 tensorRT从零起步高性能部署 课程&#xff0c;之前有看过一遍&#xff0c;但是没有做笔记&#xff0c;很多东西也忘了。这次重新撸一遍&#xff0c;顺便记记笔记。 本次课程学习 tensorRT 高级-调试方法、思想讨论 课程大纲可看…

Go语言入门记录:从基础到变量、函数、控制语句、包引用、interface、panic、go协程、Channel、sync下的waitGroup和Once等

程序入口文件的包名必须是main&#xff0c;但主程序文件所在文件夹名称不必须是main&#xff0c;即我们下图hello_world.go在main中&#xff0c;所以感觉package main写顺理成章&#xff0c;但是如果我们把main目录名称改成随便的名字如filename也是可以运行的&#xff0c;所以…

hiredis的安装与使用

hiredis的介绍 Hiredis 是一个用于 C 语言的轻量级、高性能的 Redis 客户端库。它提供了一组简单易用的 API&#xff0c;用于与 Redis 数据库进行交互。Hiredis 支持 Redis 的所有主要功能&#xff0c;包括字符串、哈希、列表、集合、有序集合等数据结构的读写操作&#xff0c…

Git企业开发控制理论和实操-从入门到深入(五)|标签管理

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…

python+协同过滤算法实现简单的图书推荐系统

背景介绍 当我们做一些推荐系统网站时&#xff0c;通常需要合适的推荐算法&#xff0c;下面给大家介绍推荐系统中经典的推荐算法——协同过滤算法。在本文中通过Python语言&#xff0c;以一个图书推荐系统为案例&#xff0c;最终实现一个基于用户对图书的评分而对指定的用户个…

带你启用window10专业版系统自带的远程桌面

启用window10专业版系统自带的远程桌面 文章目录 启用window10专业版系统自带的远程桌面前言1.找到远程桌面的开关2. 找到“应用”项目3. 打开需要远程操作的电脑远程桌面功能 总结 前言 Windows操作系统作为应用最广泛的个人电脑操作系统&#xff0c;在我们身边几乎随处可见。…

Feign在实际项目中使用详解

Feign在实际项目中使用详解 简介一 Feign客户端应该如何提供&#xff1f;二 Feign调用的接口要不要进行包装&#xff1f;2.1.问题描述2.2.问题解决 三 Feign如何抓取业务生产端的业务异常&#xff1f;3.1.分析3.2.Feign捕获不到异常3.3.异常被额外封装3.4.解决方案 案例源码 简…

Visual Studio2022史诗级更新,增加多个提高生产力的功能

Visual Studio 2022发布了17.7x版&#xff0c;这次更新中&#xff0c;增加多个提高生产力的功能以及性能进一步改进。 如果要体验新功能&#xff0c;需要将Visual Studio 2022的版本升级到17.7及以上 下面我们看看新增的功能以及改进的功能&#xff01; 目录 文件比较自动修复代…

206. 反转链表 (简单系列)

给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1] 示例 3&#xff1a; 输…

【数据结构与算法篇】 手撕八大排序算法之选择排序

​&#x1f47b;内容专栏&#xff1a; 《数据结构与算法篇》 &#x1f428;本文概括&#xff1a;选择排序包括直接选择排序与堆排序&#xff0c;本篇讲述直接选择排序与堆排序的思想及实现、复杂度及稳定性的分析。 &#x1f43c;本文作者&#xff1a; 花 蝶 &#x1f438;发布…

CSS中的margin与padding

目录 一、margin 1.概念及作用 2.基本语法 3.margin的用法 二、padding 1.介绍 2.基本语法及要求 3. 用法 4.内边距和元素宽度 讲这些之前&#xff0c;先看一张图&#xff0c;便于理解 一、margin 1.概念及作用 CSS margin 属性用于在任何定义的边框之外&#xff0c;…

K8S最新版本集群部署(v1.28) + 容器引擎Docker部署(上)

温故知新 &#x1f4da;第一章 前言&#x1f4d7;背景&#x1f4d7;目的&#x1f4d7;总体方向 &#x1f4da;第二章 基本环境信息&#x1f4d7;机器信息&#x1f4d7;软件信息&#x1f4d7;部署用户kubernetes &#x1f4da;第三章 Kubernetes各组件部署&#x1f4d7;安装kube…

二分队列+决策单调性优化dp:P6246

https://www.luogu.com.cn/problem/P6246 决策单调性 若 d p i dp_i dpi​ 由 j j j 转移&#xff0c;则 d p i 1 dp_{i1} dpi1​ 转移点 k k k 满足 k ≥ j k\ge j k≥j 发现决策点满足单调&#xff0c;但遍历的点不满足单调&#xff0c;不能用双指针&#xff0c;考虑…

计算机组成原理学习笔记-精简复习版

一、计算机系统概述 计算机系统硬件软件 计算机硬件的发展&#xff1a; 第一代计算机&#xff1a;(使用电子管)第二代计算机&#xff1a;(使用晶体管)第三代计算机&#xff1a;(使用较小规模的集成电路)第四代计算机&#xff1a;(使用较大规模的集成电路) 冯诺依曼体系结构…

VSCode连接服务器

Pycharm连接服务器参考我的另一篇文章Pycharm远程连接服务器_pycharm进入服务器虚拟环境终端_Jumbo星的博客-CSDN博客 本质上Pycharm和VSCode都只是IDE&#xff0c;没有什么好坏之分。但是因为Pycharm连接服务器&#xff08;准确来说是部署&#xff09;需要买professional。而…

5 群起集群

1.在启动集群之前&#xff0c;先配置workers,有几个节点就配置几个 [atguiguhadoop102 hadoop]$ vim /opt/module/hadoop-3.1.3/etc/hadoop/workers在该文件中增加如下内容&#xff1a; hadoop102 hadoop103 hadoop104 注意&#xff1a;该文件中添加的内容结尾不允许有空格&a…

权限提升-手工-系统权限提升

权限提升基础信息 1、具体有哪些权限需要我们了解掌握的&#xff1f; 后台权限&#xff0c;网站权限&#xff0c;数据库权限&#xff0c;接口权限&#xff0c;系统权限&#xff0c;域控权限等 2、以上常见权限获取方法简要归类说明&#xff1f; 后台权限&#xff1a;SQL注入,数…

检测链表中是否存在环

题目、解析和代码 题目&#xff1a;给定一个单链表&#xff0c;判断其中是否有环的存在 解析&#xff1a;这里使用两个遍历速度不一样的结点进行判断&#xff0c;一个慢结点从首结点开始遍历&#xff0c;这个结点每次只遍历一个结点&#xff1b;一个快结点从第二个结点进行遍历…

设计模式之八:迭代器与组合模式

有许多方法可以把对象堆起来成为一个集合&#xff08;Collection&#xff09;&#xff0c;比如放入数组、堆栈或散列表中。若用户直接从这些数据结构中取出对象&#xff0c;则需要知道具体是存在什么数据结构中&#xff08;如栈就用peek&#xff0c;数组[]&#xff09;。迭代器…