当前位置: 首页 > news >正文

适配屏幕px、rem单位换算, 将 pxToRem 函数设置为一个全局工具如:在 utils.js 文件、SCSS/Mixin 定义

页面的宽度适配:

  • 假设页面的根元素(html)的字体大小设置为动态值(常用 rem 单位适配时的做法),
    比如 html { font-size: (屏幕宽度 / 设计稿宽度) }
  • 如果根元素的字体大小为 1rem = 屏幕宽度 / 1920px,那么 300/1920 * 100rem 就能适配到实际屏幕。
  • ⚠️假设我们用 rem 来适配不同屏幕宽度,通常会设置:
html {font-size: calc(100vw / 1920); /* 根元素字体大小 */
}

这里的意思是:
100vw 表示视口宽度;
1920 是设计稿宽度;(1920是可变的)
设置 1rem = 视口宽度 / 1920。

一、 如何整体的适配

在这里插入图片描述

🌰:div在设计稿中宽 300px,设计稿的宽度是1920px;
那么该div在页面中宽:300/1920 * 100rem

这段代码的意图是通过 相对单位 rem设计稿的比例来动态适配页面中某个 div 的宽度。

具体含义如下:

  1. 设计稿中的比例:

    • 设计稿中 div 的宽度为 300px,设计稿总宽度为 1920px
    • 宽度在设计稿中的占比为:300 / 1920
  2. 页面的宽度适配:

    • 假设页面的根元素(html)的字体大小设置为动态值(常用 rem 单位适配时的做法),
      比如 html { font-size: (屏幕宽度 / 设计稿宽度) }
    • 如果根元素的字体大小为 1rem = 屏幕宽度 / 1920px,那么 300/1920 * 100rem 就能适配到实际屏幕。
  3. 计算公式:

    • 300 / 1920 计算的是设计稿中 div 宽度占整个设计稿宽度的比例。
    • * 100rem 是为了把这个比例转化成页面中的实际宽度,假设页面根元素的 1rem 是以设计稿为基准动态设置的。

实际应用:

这种写法通常用在移动端或响应式页面中,结合动态设置的 rem,可以让 div 的宽度随屏幕尺寸变化而自适应。

例如,在 CSS 文件中:

html {font-size: calc(100vw / 1920); /* 根据屏幕宽度动态设置根元素字体大小 */
}div {width: calc(300 / 1920 * 100rem); /* 按设计稿比例设置宽度 */
}

简化公式:

如果 html 的字体大小已经设为 100vw / 1920,则直接写为:

div {width: 100rem; /* 宽度自动按比例缩放 */
}

总结:

该写法通过设计稿比例和 rem 动态计算,实现了设计稿到实际页面的精准适配。

二、在div中如何适配

在这里插入图片描述

带入上述的公式
例如:div在设计稿中长 100px,设计稿的宽度是1920px;
那么该div在页面中长:100/1920 * 100rem (代入第2个公式)

1. 写成一个转换函数

可以通过一个函数,将设计稿中的长度(px)直接转换为页面中的长度(基于 rem 的单位)。假设设计稿宽度为 1920px

// 转换函数
function pxToRem(px, designWidth = 1920) {return (px / designWidth) * 100 + "rem";
}
使用示例:

对于长度为 100pxdiv

const width = pxToRem(100); // "5.208rem"

对于另一个长度为 230pxdiv

const width230 = pxToRem(230); // "11.979rem"

2. * 100rem 是固定的吗?重点

是的,这与 rempx 的换算规则 以及设计的基准有关:

  • ⚠️假设我们用 rem 来适配不同屏幕宽度,通常会设置:

    html {font-size: calc(100vw / 1920); /* 根元素字体大小 */
    }
    

    这里的意思是:

    • 100vw 表示视口宽度;
    • 1920 是设计稿宽度;
    • 设置 1rem = 视口宽度 / 1920
  • 乘以 100rem,是因为 换算公式
    如果 1rem = 视口宽度 / 1920,设计稿中的像素值要除以 1920,并换算成 rem,最终公式是:
    在这里插入图片描述
    所以,如果你设置的换算基准 htmlfont-size100vw / 1920,乘以 100rem 就是固定的。


3. 全局使用的方法

为方便全局使用,可以通过以下几种方式实现。

方法 1:通过 JS 全局变量和工具函数

可以将 pxToRem 函数设置为一个全局工具,例如在 utils.js 文件中定义:

export function pxToRem(px, designWidth = 1920) {return (px / designWidth) * 100 + "rem";
}

然后在需要的地方导入使用:

import { pxToRem } from './utils';const divWidth = pxToRem(230); // "11.979rem"

方法 2:通过 SCSS/Mixin 定义

SCSS 中,可以写一个 Mixin,直接在样式中调用:

// SCSS 函数
@function pxToRem($px, $design-width: 1920) {@return ($px / $design-width) * 100 + rem;
}// 使用示例
div {width: pxToRem(230); // 11.979rem
}
方法 3:通过 CSS 自定义属性

CSS 文件中定义一个全局变量基准:

:root {--design-width: 1920; /* 设计稿宽度 */
}@function pxToRem($px) {@return calc($px / var(--design-width) * 100rem);
}div {width: pxToRem(230); /* 使用全局基准 */
}

4. 总结

  • 函数封装: 使用 pxToRem(px, designWidth) 函数,适合动态计算,便于在 JS 中使用。
  • 样式文件封装: 利用 SCSS 函数或 CSS 自定义属性,实现全局使用,便于在样式文件中调用。
  • 100rem 是换算规则:它依赖于根元素的动态设置 font-size = 100vw / 1920,确保 rem 和设计稿比例一致。
  • 230px 转换后的宽度: "11.979rem"(根据公式计算)。

三、求页面宽度&页面高度:

let  页面宽度
if (设备宽度 / 设备高度 > 16/9) {页面宽度 = 设备高度  *  (16/9)
} else {页面宽度 = 设备宽度
}
const 页面高度 = 页面宽度 / (16/9)

如下是使用的例子:在这里插入图片描述

相关文章:

适配屏幕px、rem单位换算, 将 pxToRem 函数设置为一个全局工具如:在 utils.js 文件、SCSS/Mixin 定义

页面的宽度适配: 假设页面的根元素(html)的字体大小设置为动态值(常用 rem 单位适配时的做法), 比如 html { font-size: (屏幕宽度 / 设计稿宽度) }。如果根元素的字体大小为 1rem 屏幕宽度 / 1920px&…...

H.265流媒体播放器EasyPlayer.js播放器提示MSE不支持H.265解码可能的原因

随着人工智能和机器学习技术的应用,流媒体播放器将变得更加智能,能够根据用户行为和偏好提供个性化的内容推荐。总体而言,流媒体播放器的未来发展将更加注重技术创新和用户互动,以适应不断变化的市场需求和技术进步。 提示MSE不支…...

医学图像语义分割:前列腺肿瘤、颅脑肿瘤、腹部多脏器 MRI、肝脏 CT、3D肝脏、心室

医学图像语义分割:前列腺肿瘤、颅脑肿瘤、腹部多脏器 MRI、肝脏 CT、3D肝脏、心室 语义分割网络FCN:通过将全连接层替换为卷积层并使用反卷积上采样,实现了第一个端到端的像素级分割网络U-Net:采用对称的U形编解码器结构&#xff…...

16. 指针类型和步长概念问题

1. 项目场景: ➣ Jack Qiao对米粒说:“今天有道友遇到一个问题,举个栗子数组 arr[5] { 0 };道友发现&arr[0] 1与&arr 1打印出来的地址竟然不同。”米粒测试后果然是这样。 2. 问题描述 ☑ 举个栗子:数组 arr[5] { 0…...

【电路笔记】-布尔逻辑AND函数

逻辑AND函数 文章目录 逻辑AND函数1、概述2、逻辑 AND 函数 仅当所有输入均为 true 时,逻辑与函数输出才为 true,否则输出为 false。 1、概述 布尔代数基于逻辑函数,其中每个布尔函数(例如逻辑 AND 函数)通常具有一个…...

数据结构C语言描述3(图文结合)--双链表、循环链表、约瑟夫环问题

前言 这个专栏将会用纯C实现常用的数据结构和简单的算法;有C基础即可跟着学习,代码均可运行;准备考研的也可跟着写,个人感觉,如果时间充裕,手写一遍比看书、刷题管用很多,这也是本人采用纯C语言…...

wend看源码-APISJON

项目地址 腾讯APIJSON官方网站 定义 APIJSON 可以定义为一个面向HTTP 协议的JSON 规范,一个面向数据访问层的ORM 框架。其主要工作流程包括:前端按照既定格式组装 JSON 请求报文,通过 APIJSON-ORM 将这些报文直接转换为 SQL 语句&#xff0c…...

CSS(8):盒子阴影与文字阴影

一:盒子阴影text-shadow属性 1.box-shadow:h-shadow v-shadow blur spread color inset; 默认的是外部阴影outset,不能写在代码上 2.鼠标经过盒子后的阴影 rgba透明度 3.文字阴影 text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色; 注意点…...

Hadoop 系列 MapReduce:Map、Shuffle、Reduce

文章目录 前言MapReduce 基本流程概述MapReduce 三个核心阶段详解Map 阶段工作原理 Shuffle 阶段具体步骤分区(Partition)排序(Sort)分组(Combine 和 Grouping) Reduce 阶段工作原理 MapReduce 应用场景Map…...

web——sqliabs靶场——第十三关——报错注入+布尔盲注

发现是单引号加括号闭合的 尝试联合注入 发现不太行,那尝试报错注入。 测试报错注入 unameadmin) and updatexml(1,0x7e,3) -- &passwdadmin&submitSubmit 爆数据库 unameadmin) and updatexml(1,concat(0x7e,database(),0x7e),3) -- &passwdadmin&a…...

调大Vscode资源管理器字体

对于调整资源管理器字体大小(也就是下图红框),查找了网上很多方法。要么介绍的方法是调整了代码字体,要么是调节了终端字体,要么是通过整体放缩实现的调整,总之都不合适。 唯一的调整方法是在几篇CSDN里看到…...

【新人系列】Python 入门(十一):控制结构

✍ 个人博客:https://blog.csdn.net/Newin2020?typeblog 📝 专栏地址:https://blog.csdn.net/newin2020/category_12801353.html 📣 专栏定位:为 0 基础刚入门 Python 的小伙伴提供详细的讲解,也欢迎大佬们…...

后端开发详细学习框架与路线

🚀 作者 :“码上有前” 🚀 文章简介 :后端开发 🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬 为帮助你合理安排时间,以下是结合上述学习内容的阶段划分与时间分配建议。时间安排灵活&a…...

类文件结构详解.上

字节码 在 Java 中,JVM 可以理解的代码就叫做字节码(即扩展名为 .class 的文件),它不面向任何特定的处理器,只面向虚拟机。Java 语言通过字节码的方式,在一定程度上解决了传统解释型语言执行效率低的问题&…...

【K8S问题系列 |18 】如何解决 imagePullSecrets配置正确,但docker pull仍然失败问题

如果 imagePullSecrets 配置正确,但在执行 docker pull 命令时仍然失败,可能存在以下几种原因。以下是详细的排查步骤和解决方案。 1. 检查 Docker 登录凭证 确保你使用的是与 imagePullSecrets 中相同的凭证进行 Docker 登录: 1.1 直接登录…...

Vue+Springboot用Websocket实现协同编辑

1. 项目介绍 在本文中,我们将介绍如何使用Vue.js和Spring Boot实现一个支持多人实时协同编辑的Web应用。通过WebSocket技术,我们可以实现文档的实时同步,让多个用户同时编辑同一份文档。 2. 技术栈 前端:Vue.js 3 Vuex后端&am…...

高阶C语言补充:柔性数组

C99中,结构体中最后一个元素允许时未知大小的数组,这就叫做柔性数组成员。 vs编译器也支持柔性数组。 之所以把柔性数组单独列出,是因为: 1、柔性数组是建立在结构体的基础上的。 2、柔性数组的使用用到了动态内存分配。 这使得柔…...

MYSQL——多表查询、事务和索引

概括 出现查询结果个数为笛卡尔积的原因是sql语句: select * from tb_emp,tb_dept; 没有加上where tb_emp.dept_id tb_dept.id;(where条件可以消除笛卡尔积) select * from tb_emp,tb_dept where tb_emp.dept_id tb_dept.id; 查询类型 …...

在 Swift 中实现字符串分割问题:以字典中的单词构造句子

文章目录 前言摘要描述题解答案题解代码题解代码分析示例测试及结果时间复杂度空间复杂度总结 前言 本题由于没有合适答案为以往遗留问题,最近有时间将以往遗留问题一一完善。 LeetCode - #140 单词拆分 II 不积跬步,无以至千里;不积小流&…...

Unity类银河战士恶魔城学习总结(P132 Merge skill tree with skill Manager 把技能树和冲刺技能相组合)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址:https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了解锁技能后才可以使用技能,先完成了冲刺技能的锁定解锁 Dash_Skill.cs using System.Collections; using System…...

JavaScript 中 arguments、类数组与数组的深入解析

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 💯前言💯什么是 arguments 对象2.1 arguments 的定义2.2 arguments 的特性2.3 使用场景 💯深入了解 arguments 的结构3.1 arguments 的内部结构arguments 的关键属性…...

【java-Neo4j 5开发入门篇】-最新Java开发Neo4j

系列文章目录 前言 上一篇文章讲解了Neo4j的基本使用,本篇文章对Java操作Neo4j进行入门级别的阐述,方便读者快速上手对Neo4j的开发。 一、开发环境与代码 1.docker 部署Neo4j #这里使用docker部署Neo4j,需要镜像加速的需要自行配置 docker run --name…...

摄影:相机控色

摄影:相机控色 白平衡(White Balance)白平衡的作用: 白平衡的使用环境色温下相机色温下总结 白平衡偏移与包围白平衡包围 影调 白平衡(White Balance) 人眼看到的白色:会自动适应环境光线。 相…...

UI自动化测试中公认最佳的设计模式-POM

一、概念 什么是POM? POM是PageObjectModule(页面对象模式)的缩写,其目的是为了Web UI测试创建对象库。在这种模式下,应用涉及的每一个页面应该定义为一个单独的类。类中应该包含此页面上的页面元素对象和处理这些元…...

数字图像处理(2):Verilog基础语法

(1)Verilog常见数据类型: reg型、wire型、integer型、parameter型 (2)Verilog 常见进制:二进制(b或B)、十进制(d或D)、八进制(o或O)、…...

大公司如何实现打印机共享的?如何对打印机进行管控或者工号登录后进行打印?异地打印机共享的如何实现可以帮助用户在不同地理位置使用同一台打印机完成打印任务?

大公司如何实现打印机共享的?如何对打印机进行管控或者工号登录后进行打印?异地打印机共享的如何实现可以帮助用户在不同地理位置使用同一台打印机完成打印任务? 如果在局域网内,可以不需要进行二次开发,通过对打印机进…...

解决前端页面报错:Not allowed to load local resource

在前后端分离项目中,在前端页面里使用file://的绝对路径访问本地图片,在加载图片的 时候会报出Not allowed to load local resource 的错误。 这是因为浏览器出于安全因素,禁止通过绝对路径访问图片,需要通过虚拟路径进行访问。 …...

Qt 实现网络数据报文大小端数据的收发

1.大小端数据简介 大小端(Endianness)是计算机体系结构的一个术语,它描述了多字节数据在内存中的存储顺序。以下是大小端的定义和它们的特点: 大端(Big-Endian) 在大端模式中,一个字的最高有效…...

2024年11月21日Github流行趋势

项目名称:twenty 项目维护者:charlesBochet, lucasbordeau, Weiko, FelixMalfait, bosiraphael项目介绍:正在构建一个由社区支持的现代化Salesforce替代品。项目star数:21,798项目fork数:2,347 项目名称:p…...

Java的方法、基本和引用数据类型

个人的黑马程序员java笔记 目录 方法 例:方法定义和调用 方法的重载 对于byte, short, int, long类型 方法的内存 基本数据类型 引用数据类型 方法的值的传递的内存原理 方法 方法(method)是程序中最小的执行单元格式 方法定义&a…...

Spark分布式计算中Shuffle Read 和 Shuffle Write的职责和区别

在 Spark 的分布式计算中,Shuffle Read 和 Shuffle Write 是两个与数据重新分区和分发相关的重要阶段。它们的主要职责和区别如下: 1. Shuffle Write Shuffle Write 发生在上游的任务执行阶段,其作用是: 分区数据准备&#xff1…...

【成品文章+四小问代码更新】2024亚太杯国际赛B题基于有限差分格式的空调形状优化模型

这里仅展示部分内容,完整内容获取在文末! 基于有限差分格式的空调形状优化模型 摘 要 随着科技进步,多功能环境调节设备成为市场趋势,集成了空调、加湿器和空气 净化器功能的三合一设备能提供更舒适健康的室内环境。我们需要分析…...

实验三:构建园区网(静态路由)

目录 一、实验简介 二、实验目的 三、实验需求 四、实验拓扑 五、实验任务及要求 1、任务 1:完成网络部署 2、任务 2:设计全网 IP 地址 3、任务 3:实现全网各主机之间的互访 六、实验步骤 1、在 eNSP 中部署网络 2、配置各主机 IP …...

MySQL 三大日志详解

在 MySQL 数据库中,binlog(二进制日志)、redo log(重做日志)和 undo log(回滚日志)起着至关重要的作用。它们共同保障了数据库的高可用性、数据一致性和事务的可靠性。下面将对这三大日志进行详…...

vscode使用ssh配置docker容器环境

1 创建容器&#xff0c;并映射主机和容器的指定ssh服务端口 2 进入容器 docker exec -it <容器ID> /bin/bash 3在容器中安装ssh服务 apt-get update apt-get install openssh-server 接着修改ssh文件信息,将容器的10008端口暴露出来允许root用户使用ssh登录 vim /…...

Python设计模式详解之10 —— 外观模式

引言 Facade设计模式&#xff08;外观模式&#xff09;是一种软件设计模式&#xff0c;它提供了一个统一的接口来访问子系统中的一组接口。Facade模式定义了一个高层接口&#xff0c;这个接口使得这一子系统更加容易使用。当一个系统的内部实现非常复杂&#xff0c;或者需要与…...

[服务器] 腾讯云服务器免费体验,成功部署网站

文章目录 概要整体架构流程概要 腾讯云服务器免费体验一个月。 整体架构流程 腾讯云服务器体验一个月, 选择预装 CentOS 7.5 首要最重要的是: 添加阿里云镜像。 不然国外源速度慢, 且容易失败。 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/li…...

低速接口项目之串口Uart开发(四)——UART串口实现FPGA内部AXILITE寄存器的读写控制

本节目录 一、设计背景 二、设计思路 三、逻辑设计框架 四、仿真验证 五、上板验证 六、往期文章链接本节内容 一、设计背景 通常&#xff0c;芯片手册或者IP都会提供一系列的用户寄存器以及相关的定义&#xff0c;用于软件开发人员进行控制底层硬件来调试&#xff0c;或封装…...

【Datawhale组队学习】模型减肥秘籍:模型压缩技术4——神经网络架构搜索

神经网络架构搜索是通过自动化方法来设计神经网络架构的一种技术&#xff0c;与传统手工设计网络结构相比&#xff0c;NAS能够在大量可能的架构中进行搜索&#xff0c;找到最优的神经网络架构&#xff0c;从而减少人工调参和设计的时间。学习这章时&#xff0c;重点在于理解NAS…...

用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效

问题&#xff1a; 用elementplus实现的滚动条的页面中&#xff0c;滑动滚动条可以滚动&#xff0c;但是通过鼠标滑轮却无效&#xff0c;鼠标没有问题。 解决&#xff1a; 在开发者工具中&#xff0c; 元素->时间监听器中发现当我移除网页中祖先元素的滚动事件&#xff0c;该…...

windows下,用CMake编译qt项目,出现错误By not providing “FindQt5.cmake“...

开发环境&#xff1a;windows10 qt5.14&#xff0c; 编译器msvc2017x64&#xff0c;CMake3.30&#xff1b; 现象&#xff1a; CMakeList文件里&#xff0c;如有find_package(Qt5 COMPONENTS Widgets REQUIRED) target_link_libraries(dis_lib PRIVATE Qt5::Widgets) 用CMak…...

windows实现VNC连接ubuntu22.04服务器

最近弄了一个700块钱的mini主机&#xff0c;刷了ubuntu22.04系统&#xff0c;然后想要在笔记本上通过VNC连接&#xff0c;这样就有了一个linux的开发环境。最后实现的过程为&#xff1a; 安装vnc服务器 安装 VNC 服务器软件&#xff1a; sudo apt update sudo apt install t…...

SQL注入--联合注入--理论

什么是SQL注入&#xff1f; SQL注入&#xff08;SQL Injection&#xff09;是一种常见的Web安全漏洞。 形成的主要原因是web应用程序在接收相关数据参数时未做好过滤&#xff0c;将其直接带入到数据库中查询&#xff0c;导致攻击者可以拼接执行构造的SQL语句&#xff0c;从而获…...

LaTeX 利用注销 ccmap 宏包实现降重功能

在中文LaTeX中&#xff0c;ccmap 宏包的主要作用是支持复制和粘贴时正确处理中文字符的编码。它的功能对于生成的PDF文档尤其有用&#xff0c;使得PDF中的中文字符在被复制到其他地方时能够以正确的编码显示&#xff0c;而不是乱码或其他不正确的字符。 以下是ccmap的详细功能…...

NVR接入录像回放平台EasyCVR视频融合平台加油站监控应用场景与实际功能

在现代社会中&#xff0c;加油站作为重要的能源供应点&#xff0c;面临着安全监管与风险管理的双重挑战。为应对这些问题&#xff0c;安防监控平台EasyCVR推出了一套全面的加油站监控方案。该方案结合了智能分析网关V4的先进识别技术和EasyCVR视频监控平台的强大监控功能&#…...

经验笔记:远端仓库和本地仓库之间的连接(以Gitee为例)

经验笔记&#xff1a;远端仓库和本地仓库之间的连接 方法一&#xff1a;先创建远端仓库&#xff0c;再克隆到本地 创建远端仓库 登录到你的Git托管平台&#xff08;如Gitee、GitHub、GitLab、Bitbucket等&#xff09;。点击“New Repository”或类似按钮&#xff0c;创建一个新…...

趋势洞察|AI 能否带动裸金属 K8s 强势崛起?

随着容器技术的不断成熟&#xff0c;不少企业在开展私有化容器平台建设时&#xff0c;首要考虑的问题就是容器的部署环境——是采用虚拟机还是物理机运行容器&#xff1f;在往期“虚拟化 vs. 裸金属*”系列文章中&#xff0c;我们分别对比了容器部署在虚拟化平台和物理机上的架…...

数据科学与SQL:组距分组分析 | 区间分布问题

目录 0 问题描述 1 数据准备 2 问题分析 3 小结 0 问题描述 绝对值分布分析也可以理解为组距分组分析。对于某个指标而言&#xff0c;一个记录对应的指标值的绝对值&#xff0c;肯定落在所有指标值的绝对值的最小值和最大值构成的区间内&#xff0c;根据一定的算法&#x…...

Cesium的ClearCommand的流程

ClearCommand是在每帧渲染前可以将显存的一些状态置为初始值&#xff0c;就如同把擦黑板。当然也包括在绘制过程中擦掉部分的数据&#xff0c;就如同画家在开始绘制的时候会画导览线&#xff08;如透视线&#xff09;&#xff0c;轮廓出来后这些导览线就会被擦除。 我画了一个…...

DBeaver错误:Public Key Retrieval is not allowed

问题原因 MySQL 8.0 默认使用 caching_sha2_password 认证插件&#xff0c;并要求客户端能够使用 RSA 公钥进行加密操作。如果客户端无法正确处理 RSA 公钥检索&#xff0c;就会触发这个错误。 解决方案 右键编辑连接-连接设置-属性驱动-修改allowPublicKeyRetrieval属性的值…...