【Vue 移动端开发】适配百分之99的屏幕方案

news/2024/3/28 17:21:56/文章来源:https://blog.csdn.net/qq_39335404/article/details/130372802

之前提起移动端适配,都是一些视口的概念,包括物理像素和逻辑像素,理想视口,dpr等等等。利用 media query 和 rem 是最常见的移动端适配方案。如下代码:

const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';

在移动端UI稿尺寸为 7501334 满天飞的时代,这两句代码确实给开发者带来了很大的方便,这样设置根font-size后,px 和 rem 的转换比例成了100, 为比如UI稿一个长宽分别为 120px40px,那么开发者对应的写成1.2rem*0.4rem就可以了。后面,甚至诞生了 px-to-rem 或者 px2rem 等开发插件来帮助我们更便捷的做出计算。

**flexible.js是手淘开发出的一个用来适配移动端的js框架。**手淘框架的核心原理就是根据制不同的width给网页中html根节点设置不同的font-size,然后所有的px都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了。其实它就是一个终端设备适配的解决方案,也就是说它可以让你在不同的终端设备中实现页面适配。

VSCode 安装插件:
在这里插入图片描述在setting.json中修改cssrem中默认的字体大小,这里以屏幕为750px为例(因为flexible.js默认将屏幕分成十份,所以我们将cssrem.rootFontSize修改为75)
在这里插入图片描述在这里插入图片描述
保存之后重新打开vscode
再当我们输入宽度的时候,我就可以看到vscode自动帮我们计算好了对应的rem值,我们只要点击使用就可以了。
在这里插入图片描述

可是,随着技术的发展,人们希望有这样一种方案:不想换算,也不想考虑转换系数,更不想借助开发插件转换,就想简简单单的使用一种单位 px,使得 CSS 代码足够简洁。

postcss-px-to-viewport就是这样一款优秀的插件,它将 px 转换成视口单位 vw。众所周知,vw本质上还是一种百分比单位,100vw即等于100%,即 window.innerWidth。

  • vw 视口的最大宽度,1vw等于视口宽度的百分之一
  • vh 视口的最大高度,1vh等于视口高度的百分之一

安装 postcss-px-to-viewport 插件

yarn add postcss-px-to-viewport -D

Node 版本 v14.18.1
在这里插入图片描述

注:Vite 中已经内联了 postcss,所以并不需要额外的创建 postcss.config.js文件。如果是 Webpack ,则需要在项目根目录下添加.postcssrc.js 文件进行如下配置:

module.exports = {plugins: {autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等"postcss-px-to-viewport": {unitToConvert: "px", // 要转化的单位viewportWidth: 750, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度,即小数点位数propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vwselectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名,minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认falsereplace: true, // 是否转换后直接更换属性值exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配landscape: false // 是否处理横屏情况}}
};

Vite 项目,直接在 vite.config.js 中配置如下:

import { fileURLToPath, URL } from 'url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import postcsspxtoviewport from "postcss-px-to-viewport" //插件
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), vueJsx()],css: {postcss: {plugins: [postcsspxtoviewport({unitToConvert: 'px', // 要转化的单位viewportWidth: 750, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度,即小数点位数propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vwfontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vwselectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名,minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认falsereplace: true, // 是否转换后直接更换属性值landscape: false // 是否处理横屏情况})]}},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

代码案例:

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

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

相关文章

为什么很多程序员不反感加班?行内人:老板给钱是真的给啊

为什么很多程序员不反感加班?行内人:说给钱老板真的给! 一提到程序员,大部分人第一反应是加班多、996、脱发,这几乎成了外界对程序员刻板印象的标配。不少知名的互联网大厂也是加班之风盛行,譬如著名的华为…

论文阅读:Heterogeneous Graph Contrastive Learning for Recommendation(WSDM ’23)

论文链接 Motivation: 在推荐系统中,图神经网络在建模图结构数据上已经变成一个强有力的工具。但是现实生活的推荐语义通常涉及异质关系(像用户的社交关系,物品知识关系的依赖),这些都包含丰富的语义信息…

17、Logos使用摘要

本篇将讲述如何将WX的设置界面添加两个自定义的UI行: 包含是否启用某功能的开关,以及手速设置.并且如何定位到修改的代码.采用的是砸过壳的包. 成品也就是增加了两个UI及开关联动效果、 界面分析 如果我们要破解别人的App, 首先从界面UI入手,定位UI 1、使用class-dump导出全部…

直升机空气动力学基础---002 桨叶的主要参数

源于 1.桨叶的平面形状和主要参数 由于其设计制造比较简单,早期直升机大多采用矩形桨叶,缺点是在高速气流中,无法抑制桨尖涡,会消耗向下的诱导速度,降低旋翼的拉力。现代多采用梯形桨叶。 桨尖后掠能够降低桨尖涡 …

Flowable打印调用原生API查询接口的SQL日志

一.简介 建议在 Spring Boot 的 application.properties 中添加如下配置,开启 flowable 日志: logging.level.org.flowabledebug这个配置表示开启 flowable 的日志,开启日志的好处是可以看到底层的 SQL语句。 二.查询部署信息 例如查询流…

使用 chat_flutter 进行聊天记录展示

前言 最近需要实现一个聊天记录的页面展示,在网上发现没有适合自己的,于是自己就造了一个,总体感觉还不赖。 下面奉上地址、效果图和教程。 效果图 地址 github: https://github.com/xiaorui-23/chat_fluttergitee: https://gitee.com/xi…

selenium_交互 (谷歌浏览器驱动下载 xpath插件安装)

安装selenium (1)查看谷歌浏览器版本 谷歌浏览器右上角 ‐‐> 帮助 ‐‐> 关于 查看 浏览器版本: (2)操作谷歌浏览器驱动下载地址 http : // chromedriver . storage . googleapis . com / index . html 找到…

YOLOv5网络模型的结构原理讲解(全)

目录 前言1. 基本概念2. 输入端2.1 Mosaic 图像增强2.2 自适应锚框计算2.3 自适应图片缩放 3. Backbone层3.1 Focus结构3.2 CSP结构 3. Neck网络3.1 SPP结构3.2 PAN结构 4. 输出端4.1 Bounding box损失函数4.2 NMS非极大值抑制 前言 YOLOv5有几种不同的架构,各网络…

Qt信号槽原理

Qt之信号槽原理 一.概述 所谓信号槽,实际就是观察者模式。当某个事件发生之后,比如,按钮检测到自己被点击了一下,它就会发出一个信号(signal)。这种发出是没有目的的,类似广播。如果有对象对这…

Openswan安装和简单配置

Openswan安装和简单配置 安装环境: 操作系统:Ubuntu20.0.4TLS 用户权限:root下载Openswan: wget https://github.com/xelerance/Openswan/archive/refs/tags/v3.0.0.zip安装Openswan: 解压Openswan:(PS&#xff1a…

银行数字化转型导师坚鹏:商业银行数字化风控(2天)

商业银行数字化风控 课程背景: 数字化背景下,很多银行存在以下问题: 不清楚商业银行数字化风控发展现状? 不清楚对公业务数字化风控工作如何开展? 不知道零售业务数字化风控工作如何开展? 课程特色…

海光信息业绩高歌猛进,但其作为国产CPU龙头的“地基”并不牢固

‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 在“芯片寒冬”的大背景下,2022年全球头部芯片半导体公司纷纷下调业绩预期,英特尔、英伟达、美光等无一幸免。但是随着AIGC异军突起,仿佛寒冬中的一股暖流,催生着半导体市场行…

C. Trailing Loves (or L‘oeufs?)(求某个质因子在n的阶乘中的个数 + 思维)

Problem - C - Codeforces Aki喜欢数字,尤其是那些带有尾随零的数字。例如,数字9200有两个尾随零。Aki认为数字拥有的尾随零越多,它就越漂亮。 然而,Aki认为,一个数字拥有的尾随零的数量并不是固定的,而是…

idea中导入spring源码;在spring源码中添加注释

标题:idea中导入spring源码;在spring源码中添加注释 我是跟着他操作的,下文是一些补充说明: 这个也可以借鉴 gradle下载链接【使用网盘下载】,不过有的没有, gradel下载链接:这个比较全 1.Spring源码编译环境 spr…

Karl Guttag:现有Micro LED/LCoS+光波导AR眼镜对比解析

轻量化是未来AR眼镜的发展趋势,为了缩减尺寸,AR眼镜厂商尝试了多种方案,长期来看Micro LED光机在小型化上更有优势,但现阶段LCoS光机的图像表现更好。在CES 2023期间,DigiLens、Lumus、Vuzix、OPPO、Avegant也展出了不…

linux编译安装python的全过程,pip python不与linux系统环境混乱

因为使用要求,使得我需要在linux环境下安装一个独立的python环境,不干扰其他环境。 预安装 在安装python之前,请在linux系统下安装下面这些包: sudo apt-get install namelibssl-dev libcurl4 libcurl4-openssl-dev zlib-devel…

27-Servlet执行原理

目录 1.Tomcat详解 ①接收请求: ②根据请求计算响应: ③返回响应: 2.Tomcat执行流程 2.1.Tomcat 初始化流程 2.2.Tomcat 处理请求流程 2.3.Servlet 的 service 方法的实现 在 Servlet 的代码中并没有写 main ⽅法,那么对应…

【C++关联容器】map的成员函数

目录 map 1. 构造、析构和赋值运算符重载 1.1 构造函数 1.2 析构函数 1.3 赋值运算符重载 2. 迭代器 3. 容量 4. 元素访问 5. 修改器 6. 观察者 7. 操作 8. 分配器 map map是关联容器,它按照特定的顺序存储由关键字值和映射值的组合形成的元素。 在一…

【Springboot系列】项目启动时怎么给mongo表加自动过期索引

1、前言 在之前操作mongo的过程中,都是自动创建,几乎没有手动创建过表。 这次开发中有张表数据量大,并且不是特别重要,数据表维护一个常见的问题是过期数据没有被及时清理,导致数据量过大,查询变得缓慢。…

LeetCode-242. 有效的字母异位词

题目链接 LeetCode-242. 有效的字母异位词 题目描述 题解 题解一(Java) 作者:仲景 首先,满足条件的情况下,两个字符串的长度一定是相等的,不相等一定不满足条件 使用Hash表来存储字符串s中各个字符出现的…