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

html 根字号以及设置根元素font-size:calc(100vw/18.75)、元素rem实现自适应

news 2026/2/8 15:05:21

rem 单位介绍：rem 是相对文档根元素(html)字体大小的尺寸单位，当元素的尺寸或文字字号等使用 rem 单位时，会随着根元素的 font-size变化而变化。

得出结论：在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。

如何设置：font-size:calc(100vw/x) x:18.75或者其他

为什么？

以750px 设计稿为例 100vw=750px 750/18.75=40 即 1rem=40px;

以1920px 设计稿为例 100vw=1920px 1920 / 48 =40 即 1rem=40px;

知道对应关系，谱写页面元素时将px转换为rem 即可

html 根字号以及设置根元素font-size:calc(100vw/18.75)、元素rem实现自适应

rem 单位介绍：rem 是相对文档根元素(html)字体大小的尺寸单位，当元素的尺寸或文字字号等使用 rem 单位时，会随着根元素的 font-size变化而变化。得出结论：在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。 …...

编程日记 2024/5/24 15:40:13

size_t无符号数相关知识点

size_t无符号数相关知识点在代码编译的时候，报错一个warning： comparison between signed and unsigned interger expression [-wsign-compare] 找到代码，告警这一段代码 size_t count timeProtocol.m_intersectionArray.size(); for (u…...

编程日记 2024/5/24 15:39:12

深度学习之基于Tensorflow+Flask框架Web手写数字识别

欢迎大家点赞、收藏、关注、评论啦 ，由于篇幅有限，只展示了部分核心代码。文章目录一项目简介二、功能三、系统四. 总结一项目简介一、项目背景与意义手写数字识别是深度学习领域中的一个经典问题，也是计算机视觉领域的重要应用之一。…...

编程日记 2024/5/24 15:37:10

2024电工杯B题食谱评价与优化模型思路代码论文分析

2024年电工杯数学建模竞赛B题论文和代码已完成，代码为B题全部问题的代码，论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解（问题1模型的建立和求解、问题2模型的建立和求解、问题3模型的建立和求解）、模型…...

编程日记 2024/5/24 15:36:09

blender安装cats-blender-plugin-0-19-0插件，导入pmx三维模型

UE5系列文章目录文章目录 UE5系列文章目录前言一、Blender安装二、cats-blender-plugin-0-19-0插件下载三、下载bmp文件四、在blender2.93中安装cats-blender-plugin-0-19-0插件前言 blender本身不支持pmx三维模型，需要用到cats-blender-plugin-0-19-0插件。一…...

编程日记 2024/5/24 15:35:08

[源码+搭建教程]西游伏妖篇手游_GM_单机+和朋友玩

为了学习和研究软件内含的设计思想和原理，本人花心血和汗水带来了搭建教程！！！ 教程不适于服架设，严禁服架设！！！请牢记！！！ 教程仅限学习使用&…...

编程日记 2024/5/24 15:34:07

windows、mac、linux中node版本的切换(nvm管理工具)，解决项目兼容问题 node版本管理、国内npm源镜像切换

文章目录在工作中，我们可能同时在进行2个或者多个不同的项目开发，每个项目的需求不同，进而不同项目必须依赖不同版本的NodeJS运行环境，这种情况下，对于维护多个版本的node将会是一件非常麻烦的事情，nvm就是…...

编程日记 2024/5/24 15:33:05

【MySQL精通之路】全文搜索-布尔型全文搜索

1.使用方法 MySQL可以使用IN BOOLEAN MODE修饰符执行布尔全文搜索。使用此修饰符，某些字符在搜索字符串中单词的开头或结尾具有特殊含义。在下面的查询中，和-运算符分别表示单词必须存在或不存在，才能进行匹配。因此，查询检…...

编程日记 2024/5/24 15:31:02

【学习笔记】C++每日一记[20240520]

简述几种内存泄漏的预防机制用智能指针代替普通指针，由于智能指针自带引用计数功能，能够记录动态分配空间的引用数量，在引用计数为零时，自动调用析构函数释放空间。借助一些内存泄漏检测工具，例如Valgrind、Memche…...

编程日记 2024/5/24 15:30:00

【热门话题】一文带你读懂公司是如何知道张三在脉脉上发了“一句话”的

按理说呢，A公司和脉脉属于不同的平台，而且脉脉上大家可以匿名发言，所以，即便我坐在你边上，我发了一句话上去，你也不知道是谁发的。但通过一些技术，我们却可以分析出，公司是如何知道张…...

编程日记 2024/5/24 15:28:59

linux命令日常使用思考

linux命令日常使用思考复制的相关问题scp和cp的区别root192.168.5.229-r的理解更新版本的相关问题svn info 根目录和家目录的区别根目录家目录复制的相关问题 scp和cp的区别安全性：SCP 是基于 SSH 的加密传输协议，可以保证数据在传输过程中的安全性…...

编程日记 2024/5/24 15:27:57

同余定理与哈希函数

目录同余定理哈希函数加密算法余数有很多的应⽤场景，⽐如散列函数、加密算法，循环冗余校验等等。生活中也有很多与余数有关的例子。比如，你要将1147条数据分页写入，每页10条，计算总页数。就可以用1147除以10&#x…...

编程日记 2024/5/24 15:26:56

03-01-Vue组件的定义和注册

前言我们接着上一篇文章02-Vue实例的生命周期函数来讲。下一篇文章 03-02-Vue组件之间的传值什么是组件组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们…...

编程日记 2024/5/24 15:24:54

【python进阶】txt excel pickle opencv操作demo

文章目录 1. txt读写读综合案例日志文件读写 2. excel读写读取csv读取xlsx 3. matplotlib 案例折线图多个折现图散点图柱状图饼状图 4 opencv 案例加载与展示图片缩放图片旋转图片保存图片读取摄像头视频保存opencv 综合案例 5 pickle 案例 1. txt读写读 file.read() file.r…...

编程日记 2024/5/24 15:23:53

Aware接口作用

介绍 Aware（感知）接口是一个标记，里面没有任何方法,实际方法定义都是子接口确定（相当于定义了一套规则，并建议子接口中应该只有一个无返回值的方法）。我们知道spring已经定义好了很多对象，如…...

编程日记 2024/5/24 15:22:51

Docker部署Minio S3第三方存储

Docker部署Minio S3第三方存储你不要着急，你先去读你的书，我去看我的电影，总有一天，我们会窝在一起，读同一本书，看同一部电影。安装Docker 1、选择要安装的平台 Docker要求CentOS系统的内核版本高于3.1…...

编程日记 2024/5/24 15:19:49

听说京东618裁员没？上午还在赶需求，下午就开会通知被裁了~

文末还有最新面经共享群，没准能让你刷到意向公司的面试真题呢。京东也要向市场输送人才了? 在群里看到不少群友转发京东裁员相关的内容： 我特地去网上搜索了相关资料，看看网友的分享： 想不到马上就618了，东哥竟然抢…...

编程日记 2024/5/24 15:18:47

力扣226. 翻转二叉树（DFS的两种思路）

Problem: 226. 翻转二叉树文章目录题目描述思路复杂度Code 题目描述思路涉及二叉树的递归解法时往往需要考虑两种思路： 1.在递归遍历时执行题目需要的具体要求； 2.将一个大问题分解为多个小子问题具体到本体： 思路1：遍历先…...

编程日记 2024/5/24 15:16:46

状态机-非重叠的序列检测

描述设计一个状态机，用来检测序列 10111，要求： 1、进行非重叠检测即101110111 只会被检测通过一次 2、寄存器输出且同步输出结果注意rst为低电平复位信号示意图： 波形示意图： 输入描述输入信号 clk rst data…...

编程日记 2024/5/24 15:15:45

Word怎么画图？这5个方法收藏好！

“我需要在Word文档中画一些图，想问下Word应该怎么画图呢？有没有朋友可以帮我看看怎么操作呢？” 在今天的数字化时代，信息爆炸式增长，人们越来越需要高效、直观地传递和接收信息。而Word画图功能正是这一需求的完美体现…...

编程日记 2024/5/24 15:14:43

1 方法一先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...

编程新知 2026/1/30 22:07:56

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略背景Solution --- 分表背景使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...

编程新知 2026/1/4 3:47:09