前端大屏自适应方案

一般后台管理页面,需要自适应的也就是大屏这一个,其他的尺寸我感觉用第三方框架继承好的就挺合适的,当然自适应方案也可以同步到所有页面,但我感觉除了 to c 的项目,不太需要所有页面自适应,毕竟都是查看和管理数据的,也没有很多花哨的东西

我这次做的大屏使用的自适应方案是 vw + rem + flex

这种方案我感觉比较万金油,整体框架使用 vw + flex,至于其中比较精确的长度和宽度以及字体大小就使用rem

vw和flex这里就不细说了,没什么好讲的,100vw就是撑满整个浏览器的宽度,flex不细说,详情可看 阮一峰flex

主要讲一下这个rem,其实rem也很简单,rem就是根据根节点的字体大小(通常是html)来计算元素的字体大小,比如现在我给html定义了字体大小,然后我给一个div定义长和宽

html {font-size: 20px;
}div {width: 1rem;height: 1rem;
}

此时你打开控制台你就能看到 这个div的长宽都是20px

ok,那么能理解这个的情况下,如何使用rem做到自适应呢,比如ui设计图的宽度是1920 x 1080 的尺寸,现在有一个盒子长192px,也就是设计图的 1/10,如果我使用 px 单位的话会出现什么情况呢,我来逐一解答

首先,如果我仅仅使用px作为这个盒子的单位会出现什么情况:如果你的屏幕分辨率是 1920 x 1080,那么这个盒子的宽度将会占屏幕的 1/10,如果有一个物理尺寸相同的(也就是常说的24寸 27寸这种 叫物理尺寸)分辨率更高的屏幕,比如分辨率是2880 x 1620,那么这个盒子的宽度将会占屏幕的 1/15,也就是说如果你单纯使用px作为单位,在不同的分辨率的屏幕上,这个盒子的大小看上去是会有区别的,也就会和你的ui设计图有出入,原本你想占整体宽度的1/10,结果换个屏幕你可能变成了1/15 、 1/20

那么,如何解决这个问题呢,怎么可以在不同分辨率的屏幕上,达到和ui设计图一样的比例呢,那就需要rem单位了,还是以ui设计图 1920 x 1080 为例子,你想写一个div 的宽度 为 1/10 也就是192px,你可以设置 html 的font-size为192px,然后讲div 的 width 写为 1rem,接下来的问题就转变成,如何能在不同分辨率下动态修改 html的font-size 的问题

介绍两个插件

postcss-pxtoremamfe-flexible

amfe-flexible 就是上面说的动态修改html的font-size,原理就是获取当前设备的宽度(你也可以理解为分辨率),把当前设备宽度划分为10等份,动态设置html元素的字体大小为一份,比如当前分辨率 1920 那么html的font-size就是192px,如果是2560的分辨率 html的font-size就是 256px

postcss-pxtorem 这个插件就是能将你写的px转换成rem,他们结合起来就可以达到自适应的效果,还是举例说明,你拿到一份ui设计图,1920 x 1080,其中一个div宽 192,那么此时你在代码中写下了 width:192px,此时
postcss-pxtorem插件会将你的width转换成 1rem,(这里插一句,为什么我写192px就是1rem,因为这个插件可以设置,后面会说用法),转换成1rem之后,这个时候的width的具体大小就是根据 html 的font-size 变化来变化了,此时屏幕变化,amfe-flexible 能获取到当前设备的宽度,取 1/10 为 html的font-size ,这样 div 的 width就是动态,并且能保证在不同分辨率的屏幕上比例和设计图一致

下面说下这两个插件的用法,以vue举例,我这里是vue3

1.下载3个插件 amfe-flexible postcss postcss-pxtorem

npm install amfe-flexible postcss postcss-pxtorem --save

2.vite.config.js中引入

module.exports = {css: {postcss: {plugins: [postCssPxToRem({rootValue: 192,propList: ['*'],exclude: (e) => {if (/src(\\|\/)views(\\|\/)echarts/.test(e)) {return false}return true}}),]}}
}

rootvalue:就是之前提到,保证和ui设计图一致的 如果是1920 就写192, 2560 就写256,
propList: 是一个存储哪些将被转换的属性列表,这里设置为 ['*'] 全部,假设需要仅对边框进行设置,可以写['*', '!border*']
exclude:要忽略并保留为px的文件路径,如果value是字符串,它将检查文件路径是否包含字符串。
‘exclude’ 将匹配 \project\postcss-pxtorem\exclude\path
如果value是正则,它将检查文件路径是否与regexp相匹配。
/exclude/i 将匹配 \project\postcss-pxtorem\exclude\path
如果value是function,则可以使用exclude function返回true,该文件将被忽略。
回调函数会将文件路径作为参数传递,它应该返回一个布尔结果。

function (file) { return file.indexOf('exclude') !== -1; }

这里要提醒一下 postcss-pxtorem 有一个坑,就是打包后可能会失效
我这里打包是用的阿里云搭建的流水线,打包步骤就是

 npm installnpm run build 

需要添加一个

 npm cache clean --force	//清除缓存npm installnpm run build 

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

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

相关文章

STM32CUBEIDE FreeRTOS操作教程(五):mutex互斥信号量

STM32CUBEIDE FreeRTOS操作教程(五):mutex互斥信号量 STM32CUBE开发环境集成了STM32 HAL库进行FreeRTOS配置和开发的组件,不需要用户自己进行FreeRTOS的移植。这里介绍最简化的用户操作类应用教程。以STM32F401RCT6开发板为例&am…

通过http地址下载文件

1.HttpWebResponse方法 public void GetPostContent(string url, string localSavePath) {try{ServicePointManager.SecurityProtocol SecurityProtocolType.Tls12;HttpWebRequest myRequest (HttpWebRequest)WebRequest.Create(url);myRequest.Method "GET";myR…

蓝牙技术|详谈蓝牙信道探测技术,可实现厘米级精准定位

2024年9月5日,蓝牙技术联盟发布蓝牙6.0核心规范。相比此前各版本,蓝牙核心规范6.0版的主要创新和新功能包括:支持蓝牙信道探测、同步适配层增强、LL扩展功能和 帧空间更新。 蓝牙信道探测 市场上已经有不少高精度定位技术了,像 …

ToF传感器更新

我们最近改进了 ToF 解码管道(固件)和 ToF 工厂校准,该校准已应用于我们最新的带有 ToF 相机的OAK-D-SR-PoE 1. 点云 这是直接来自摄像机的原始点云(没有应用任何后处理过滤器)。 2. ToF 精度 (ToF 深度误差…

界面控件Telerik UI for WinForms 2024 Q3概览 - 支持合并单元格等

Telerik UI for WinForms拥有适用Windows Forms的110多个令人惊叹的UI控件。所有的UI for WinForms控件都具有完整的主题支持,可以轻松地帮助开发人员在桌面和平板电脑应用程序提供一致美观的下一代用户体验。 本文将介绍界面组件Telerik UI for WinForms在今年第一…

PostgreSQL 模式

PostgreSQL 模式 介绍 PostgreSQL 是一种功能强大的开源对象关系数据库管理系统(ORDBMS),它以其可靠性、健壮性和支持高级功能而闻名。在 PostgreSQL 中,模式(schema)是一个重要的概念,它用于…

3d可视化图片:通过原图和深度图实现

1、depthy 在线体验demo: https://depthy.stamina.pl/#/ 也可以docker安装上面服务: docker run --rm -t -i -p 9000:9000 ndahlquist/depthy http://localhost:90001)首先传原图 2)再传对应深度图 3)效果 </ifra

Linux ubuntu debian系统安装UFW防火墙图形化工具GUFW

GUFW是UFW的图形化前端&#xff0c;可以通过以下命令安装&#xff1a; sudo apt install gufw安装成功后&#xff0c;可以通过应用程序菜单启动GUFW&#xff0c;在图形界面中&#xff0c;可以方便地添加、修改和删除规则&#xff0c;查看状态和日志。

如何在Windows上安装Docker

在 Windows 上使用 Docker 有两种主要方式&#xff1a;通过 Docker Desktop 安装并使用 WSL 2 作为后端&#xff0c;或者直接在 WSL 2 中安装 Docker。这里推荐手残党直接用图形界面安装到WSL 2的后端&#xff1a; 一、启用Hyper-V和容器特性 1. 右键Windows点击应用和功能 …

【ppt2svg svg2png/jpg】ppt转图片解决方案

ppt处理工具 pptx 免费&#xff0c;功能有限&#xff0c;会有一些问题aspose 收费&#xff0c;功能丰富&#xff0c;有水印spire 收费&#xff0c;功能丰富&#xff0c;有水印基于js/vue的方案 任务&#xff1a;PPT转图片 为了跳过水印&#xff0c;有几种间接的方案 方案一 …

分布式系统的概念与设计模式

概念 定义&#xff1a;分布式系统是指将数据和计算任务分散到多个独立的计算机上&#xff0c;这些计算机通过网络进行通信和协作&#xff0c;共同对外提供服务。分布式系统不仅提高了系统的可靠性和可扩展性&#xff0c;还增强了系统的并发处理能力和数据管理能力。 特点&…

【操作系统强化】王道强化一轮笔记

第一章 计算机系统概述 考点1 操作系统的概念、特征和功能 1. 2. 考点2 内核态与用户态 1. 2.用户态和内核态之间的切换本质上就是应用程序和操作系统对CPU控制器的切换 考点3 中断和异常 1. 2. 考点4 系统调用 1. 2. 3.C 考点5 操作系统引导 1. 2. ①磁盘的物理格式化&…

React-Native 中使用 react-native-image-crop-picker 在华为手机上不能正常使用拍照功能

背景: React-Native 0.66 中使用 react-native-image-crop-picker 在安卓 华为手机上不能正常使用拍照功能, 其他品牌正常 代码如下: import ImagePicker from react-native-image-crop-picker;ImagePicker.openCamera(photoOptions).then(image > {callback(image);}) …

Linux 自旋锁

当内核发生访问资源冲突的时候&#xff0c;可以有两种锁解决方案&#xff1a; 1.原地等待 2.挂起当前进程&#xff0c;调度其它进程执行 spinklock 是内核中提供的一种比较常见的锁机制&#xff0c;自旋锁是“原地等待” 的方式解决资源冲突的&#xff0c;即&#xff0c;一个…

mysql如何避免插入重复数据

创建唯一索引&#xff08;重复则忽略&#xff0c;不会报错&#xff09; 创建方式1 -- 创建表时添加唯一键 CREATE TABLE goodsapp_colors (id int AUTO_INCREMENT PRIMARY Key,colorname varchar(50) not null unique,colorImage varchar(50) not null unique ); 创建方式2…

万恶的goto关键字

提到goto, 大家一定能想到迪杰斯特拉发表的著名论文goto有害论(Go To Statement Considered Harmful)。正是它推动了结构化程序设计语言的发展。公正地说&#xff0c;goto并非那么可怕&#xff0c;机器码/汇编码本身支持跳转&#xff0c;就是goto的底层形态。计算机程序中条件选…

库仑定律-库仑力-两个电荷之间静电力的计算公式

图中&#xff1a; q1&#xff0c;q2 为两个电荷r 为电荷间的距离 r ^ 1 , 2 \widehat{r}_{1,2} r 1,2​ 为从 q1 指向 q2 的单位向量 F ⃗ 1 , 2 \vec{F}_{1,2} F 1,2​ 为 q1 施加到 q2 上的静电力 公式&#xff1a; F ⃗ 1 , 2 q 1 q 2 K r 2 r ^ 1 , 2 \vec{F}_{1,2} \f…

七种修复错误:由于找不到msvcr110.dll 无法继续执行的方法

当你在运行某些程序时遇到“找不到msvcr110.dll”的错误提示&#xff0c;这通常意味着你的系统缺少了Microsoft Visual C 2012 Redistributable包中的一个重要文件。这个DLL文件是Microsoft Visual C Redistributable的一部分&#xff0c;用于支持许多使用Visual C编写的软件和…

FastAPI挂载静态资源

FastAPI挂载静态资源 使用场景&#xff1a;前后端不分离&#xff0c;后端挂载图片&#xff0c;css,js等静态资源&#xff0c;给客户端响应html页面 首先假设项目根目录为app&#xff0c;app目录下的static为存放静态资源的目录 #app/main.py from fastapi import FastAPIapp…

.netCore运行的环境WindowsHosting和dotnet-sdk区别

Windows Hosting和dotnet-sdk是.NET Core的两个不同组件&#xff0c;各自扮演着不同的角色。‌ Windows Hosting‌&#xff1a;这是专门为在Windows服务器上运行ASP.NET Core应用程序设计的组件。它包含了IIS(Internet Information Services)集成模块&#xff0c;使得ASP.NET …