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

vue-h5移动Web的rem配置

H5移动的适配方案

rem

rem适配方案是兼容性比较好的移动端适配方案,rem支持大部分的移动端系统和机型。

rem是相对于根元素的字体大小的单位。本质上就是一个相对单位,和em的区别是:em是依赖父元素的字体来计算,rem是依赖根元素的字体来计算。

rem适配的原理:把px单位换算为rem单位,然后根据屏幕大小动态设置根元素HTML的字体大小,这样实现在不同屏幕下适配的目的。

动态设置根元素的font-size

使用浏览器浏览网页,HTML的字体大小默认值是由浏览器来决定的,比如有的浏览器默认字体大小为16px,那么16px等于1rem。

在实际开发中,我们都是根据屏幕的宽度来动态设置。

动态设置有两种方式:

一、通过媒体查询来动态设置:

@media screen and (min-width:461px) {html {font-size: 16px;}
}@media screen and (max-width:460px) and (min-width:401px) {html {font-size: 20px;}
}@media screen and (max-width:400px) {html {font-size: 26px;}
}

二、使用JavaScript动态设置html的font-size,代码如下:

    <script>window.addEventListener("resize",function(){let htmlDom = document.getElementsByTagName('html')[0];htmlDom.style.fontSize = htmlDom /10 +'px';})</script>

rem的计算

根据上面的计算公司,我们可以拿到rem的基准值,比如一个机型的屏幕宽度为375px【由Chrome浏览器上DevTools中的Device Mode得到】,那么rem的基准值就是37.5

如果我们的H5样式是使用Sass的话,就可以定义计算公式:

@function pxTorem($px){$rem:37.5;$return ($px / $rem) + rem
}.brn{width: pxTorem(200);height:pxTorem(600)
}

这就是在某个场景下,rem的计算方式。

相关文章:

vue-h5移动Web的rem配置

H5移动的适配方案 rem rem适配方案是兼容性比较好的移动端适配方案&#xff0c;rem支持大部分的移动端系统和机型。 rem是相对于根元素的字体大小的单位。本质上就是一个相对单位&#xff0c;和em的区别是&#xff1a;em是依赖父元素的字体来计算&#xff0c;rem是依赖根元素…...

企业级数据仓库-数仓实战

数仓实战 安装包大小 安装清单 环境搭建 一、环境搭建01&#xff08;机器准备&#xff09; 准备好三台虚拟机&#xff0c;并进行修改hostname、在hosts文件增加ip地址和主机名映射 。 1、设置每个虚拟机的hostname vi /etc/sysconfig/network 修改HOSTNAMEnode02修改hostna…...

Spring Boot 下载文件(word/excel等)文件名中文乱码问题|构建打包不存在模版文件(templates等)

Spring Boot 下载文件(word/excel等)文件名中文乱码问题&#xff5c;构建打包不存在模版文件(templates等) 准备文件&#xff0c;这里我放在resource下的templates路径 在pom中配置构建打包的资源&#xff0c;更新maven 如果使用了assembly打包插件这样配置可能仍不生效&#…...

Ansible数组同步至Shell脚本数组中

1、ansible中定义数组&#xff0c;我以 ccaPojectList 数组为例子,如下图数组内容 2、需要写一个j2模板的Shell脚本&#xff0c;在j2模板的Shell脚本中引用ansible的 ccaPojectList 数组&#xff0c;大致如下图&#xff1a; {% for item in ccaPojectList %} "{{ item }…...

私域流量的优势

私域流量是指由自身品牌或个人拥有并具备完全掌控权的流量资源。它相比于传统的广告推广&#xff0c;拥有独特的优势。 首先&#xff0c;私域流量能够更加精准地定位目标用户&#xff0c;实现精准传播。不再盲目投放广告&#xff0c;而是通过建立自身社群、粉丝群&#xff0c;获…...

Java 中“1000==1000”为false,而”100==100“为true?

如果你运行下面的代码: Integer a 1000, b 1000; System.out.println(a b);//1Integer c 100, d 100; System.out.println(c d);//2你会得到: false true基本知识&#xff1a;我们知道&#xff0c;如果两个引用指向同一个对象&#xff0c;用表示它们是相等的。如果两…...

片上网络(1)概述

前言 NoC&#xff1a;On-Chip Networks&#xff0c;片上网络。 由于多核乃至众核时代的到来&#xff0c;用于连接它们的可扩展、低延迟、大带宽的通信结构变得至关重要。 在核心较少时&#xff0c;总线Bus和矩阵/交叉开关Crossbar是主要的互联结构。总线可以提供较低的传输延迟…...

使用 React Native 针对 Android 进行开发

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 概述 通过安装所需工具开始使用 React Native 创建新的 React Native 项目 本指南将有助于开始使用 Windows 上的…...

LeetCode 每日一题 2023/9/11-2023/9/17

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 9/11 630. 课程表 III9/12 1462. 课程表 IV9/13 2596. 检查骑士巡视方案9/14 1222. 可以攻击国王的皇后9/15 LCP 50. 宝石补给9/16 198. 打家劫舍9/17 9/11 630. 课程表 II…...

Linux系统调试篇——GDBSERVER远程调试

文章目录 安装 GDBSERVERgdbserver 用法具体步骤 本篇讲解如何使用gdbserver对目标开发板上的程序进行远程调试。 安装 GDBSERVER 首先在开发板上安装 gdbserver&#xff1a; apt install gdbservergdbserver 用法 gdbserver用法描述&#xff1a; Usage: gdbserver [OPTION…...

前端实现打字效果

前端实现打字效果 不带光标 只一次播放 HTML <!-- 需要在初始化的时候不显示文字 --> <div id"typing"></div>CSS #typing {position: relative;font-size: 24px;font-family: Arial, sans-serif;padding: 10px; }JS const text "要显…...

Unix和Linux、GNU和GPL、RHEL和Centos、Debian和Ubuntu

文章目录 Unix和LinuxGNU和GPLGNU/Linux名称的来源RHEL和CentosDebian和Ubuntu 以上都是操作系统&#xff0c;服务器操作系统、桌面操作系统。 对于刚刚接触Linux系统或者从事运维相关工作的人来说&#xff0c;肯定会听过很多名词&#xff0c;但是不知道他们的区别和联系&#…...

InfiniBand vs 光纤通道,存储协议的选择

数字时代&#xff0c;数据量爆发增长&#xff0c;企业越来越迫切地追求高吞吐量、低延迟和更高性能的网络基础设施&#xff0c;存储协议的选择变得愈发至关重要。在众多存储协议中&#xff0c;InfiniBand和光纤通道备受关注。本文旨在深入探讨InfiniBand和光纤通道作为存储协议…...

第2章_freeRTOS入门与工程实践之单片机程序设计模式

本教程基于韦东山百问网出的 DShanMCU-F103开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id724601559592 配套资料获取&#xff1a;https://rtos.100ask.net/zh/freeRTOS/DShanMCU-F103 freeRTOS系列教程之freeRTOS入…...

python LeetCode 刷题记录 58

题目 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 示例 输入&#xff1a;s "Hello World" 输出&#xff1a;5 解释&am…...

HarmonyOS开发:那些开发中常见的问题汇总(一)

前言 本来这篇文章需要讲述静态共享包如何实现远程依赖和上传以及关于静态共享包私服的搭建&#xff0c;非常遗憾的告诉大家&#xff0c;由于组织管理申请迟迟未通过&#xff0c;和部分文档官方权限暂未开放&#xff0c;关于这方面的讲解需要延后了&#xff0c;大概需要等到202…...

新能源汽车驱动电机的基本知识

学习目标:了解电机的基本知识。能力目标:培养学生搜集和整理相关资料的能力。素质目标:培养学生良好的职业素养。额定电店.在夫见定条件下电池工作的*于佳 电压知识准备术语和定义。 (1)驱动电机系统 通过有效的控制策略将动力蓄电池提供的直流电转化为交流实现电机的正转以及反…...

流媒体协议——RTSP

RTSP RTSP(Real Time Streaming Protocol):实时流媒体协议&#xff0c;是基于文本的协议&#xff0c;采用ISO10646字符集&#xff0c;使用UTF-8编码 RTSP-over-TCP&#xff0c;默认端口554 RTSP-over-HTTP&#xff0c;默认端口为8080 RTSP OVER WebSocket 默认端口为 80&am…...

Arcgis提取点数据经纬度

Arcgis提取点数据经纬度 现已打开tiff影像和采样点的shape文件。目标是提取采样点的经纬度信息然后导出。 打开数据管理工具-要素-添加XY坐标 在点的图层上右击打开属性表时&#xff0c;经纬度信息已经添加到属性表中。 在属性表的左上角中点击导出&#xff0c;导出为文本文…...

【小记录】jupyter notebook新版本

手欠升级 &#x1f605;今天手贱&#xff0c;在anaconda navigator里面更新了最新版本的spyder&#xff0c;然后莫名奇妙地jupyter notebook就打不开了&#x1f605;&#xff0c;报错说缺少模块”ModuleNotFoundError: No module named jupyter_server.contents“&#xff0c;…...

Gpmall分布式事务处理:订单创建与库存扣减的最终一致性保障

Gpmall分布式事务处理&#xff1a;订单创建与库存扣减的最终一致性保障 【免费下载链接】gpmall 项目地址: https://gitcode.com/gh_mirrors/gp/gpmall 在电商系统中&#xff0c;订单创建与库存扣减的分布式事务处理是确保数据一致性的核心挑战。Gpmall项目通过创新的P…...

智能邮件秘书:OpenClaw+Qwen3.5-9B自动分类与回复

智能邮件秘书&#xff1a;OpenClawQwen3.5-9B自动分类与回复 1. 为什么需要自动化邮件处理&#xff1f; 每天早晨打开邮箱时&#xff0c;看到堆积如山的未读邮件总会让人头皮发麻。作为一位经常需要处理客户咨询的技术顾问&#xff0c;我最高纪录是一天收到187封邮件。即使每…...

[具身智能-125]:RQT(Robot Qt),一个可以全方位监控ROS2系统内部节点工作状态的可视化超级终端!!!

如果说 RViz2 是机器人的“眼睛”&#xff08;看 3D 世界&#xff09;&#xff0c;那么 RQT 就是机器人的“听诊器”和“控制台”。它基于 Qt 框架开发&#xff0c;采用插件化架构&#xff0c;让你能在一个窗口里完成对 ROS2 系统内部状态的全方位监控与调试。为了让你更好地利…...

解锁音乐格式终极指南:一键解决加密音频播放难题

解锁音乐格式终极指南&#xff1a;一键解决加密音频播放难题 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地址: https://gi…...

云原生实战:如何用GROUP模型提升容器工作负载预测准确率(附避坑指南)

云原生实战&#xff1a;如何用GROUP模型提升容器工作负载预测准确率&#xff08;附避坑指南&#xff09; 在云原生架构中&#xff0c;容器资源管理一直是DevOps团队面临的重大挑战。传统单容器预测方法往往忽视了微服务间复杂的协同关系&#xff0c;导致预测误差居高不下。本文…...

别再只盯着GPU了!聊聊华为昇腾310/910芯片在AI推理和训练中的实战选型心得

华为昇腾芯片实战选型指南&#xff1a;如何用310/910构建高性价比AI计算方案 当你在深夜调试一个即将上线的图像识别模型时&#xff0c;服务器机房的轰鸣声和不断攀升的电费账单可能比代码bug更让人焦虑。三年前&#xff0c;我们团队就面临这样的困境——用8块NVIDIA V100训练的…...

PCB设计新手必看:从零开始掌握PCB设计全流程

1. PCB设计入门&#xff1a;从零开始的完整指南 刚接触PCB设计时&#xff0c;我完全被各种专业术语和复杂流程搞懵了。直到自己动手做了几块板子&#xff0c;才发现其实只要掌握正确的方法&#xff0c;PCB设计并没有想象中那么难。这篇文章就是把我踩过的坑和积累的经验&#x…...

【高通Camera_Tuning】优化树荫下及背景绿植时白平衡偏色问题(一)

参考案例&#xff1a;在室外拍摄时白平衡正常&#xff0c;但遇到树荫下或背景有绿植时出现偏色&#xff08;偏蓝&#xff09;问题。可通过修改绿区解决偏色问题。解决方法&#xff1a;1.开启Green zone在3A文件 -- /* Green */ -- /* Green Projection Enable */将/* Green Pr…...

深入解析NAND Flash基础操作与系统集成——从阵列结构到多Die协同

1. NAND Flash基础结构与工作原理 NAND Flash存储器是现代存储系统的核心组件&#xff0c;从U盘到企业级SSD都依赖这项技术。要理解它的强大之处&#xff0c;得先从它的物理结构说起——想象一个巨大的立体停车场&#xff0c;每个停车位就是一个存储单元&#xff0c;而控制电路…...

OpenClaw语音控制扩展:Qwen3.5-4B-Claude对接Whisper实现声控自动化

OpenClaw语音控制扩展&#xff1a;Qwen3.5-4B-Claude对接Whisper实现声控自动化 1. 为什么需要语音控制自动化 去年冬天的一个深夜&#xff0c;我在赶制项目文档时突发奇想&#xff1a;如果能让AI听懂我的语音指令直接操作电脑&#xff0c;是不是连键盘都不用碰了&#xff1f…...