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

css rem之2024

news 文章来源：https://blog.csdn.net/u014071104/article/details/141094676 2025/1/16 10:15:53

话题开始前


我们都知道1rem是等于html fontSize标签的字体大小的，我们主要用来做移动端网页设计稿等比例在手机上面的显示。

看到的问题

这个html fontsize的大小是通过js动态计算的，而这个js的运行时晚于html渲染的，所以会导致一个问题，进入页面时候会看到页面整体缩放一下

为了避免使用js计算，我看到有些网站时用媒体查询给html设置fontSize的，这个方式也不失为一种解决方式，但是需要维护好几个设备宽度，并且并不全面，虽然问题不大，但是并不够完善

2024年

2024年，我有重温了一下这方面的知识，我发，其实可以使用calc配合vw来计算这个html fontSize的，先贴代码，再讲原理

 html {font-size: calc(100vw / 7.5);
}

原理

我们依旧期待一个前提，1rem等于设计稿上面的100px，同时默认设计稿为750px

如果设计稿是750，那理论上一个rem等于100px

假设设计稿是750px,那100px就等于750/7.5
同样，我们想要拿到屏幕上面等比例的宽度
也需要网页渲染区域宽度除以7.5，
这样就走可以得到网页渲染区域的【等比例的宽】

屏幕屏幕宽/7.5=设计稿宽/7.5

那如果是640屏幕宽呢，那上面的代码就会是

 html {font-size: calc(100vw / 7.5);
}

我们同一家公司里面的设计稿肯定必须得统一一个标准的，目前主流就是750，如果出现不同尺寸饿设计稿，这时候就应该是工作流程活着标准上面出现了什么问题了，

如何使用

宽高100px的div写成以下这样就可以了

div{width:1rem;height:1rem
}

如何不需要自己手动写rem

可以使用第三方插件，例如post-css-px2rem活着less2rem等。。。。。

兼容：

 

不过奇怪的是caniuse上面 chrome form android的支持怎么看起来版本这么高，我18年时候就开始用calc和vm了

相关文章：

css rem之2024

话题开始前 我们都知道1rem是等于html fontSize标签的字体大小的，我们主要用来做移动端网页设计稿等比例在手机上面的显示。 看到的问题 这个html fontsize的大小是通过js动态计算的，而这个js的运行时晚于html渲染的，所以会导致一个问题&am…...

编程日记 2024/8/15 13:00:29

python自动化笔记：pytest框架

目录 一、pytest介绍二、测试用例命名规则2.1、pytest命名规则2.2、python命名规范 三、pytest运行方式3.1、主函数方式3.2、命令行方式3.3、通过pytest.ini的配置文件运行（常用） 四、跳过测试用例4.1 无条件跳过4.2 有条件跳过 五、用例的前后置&#x…...

编程日记 2024/8/15 12:58:27

wpf 路径动画 举例

先&#xff0c;我们需要在XAML中定义一个Path&#xff0c;这个Path将定义动画的路线。然后&#xff0c;我们将使用DoubleAnimationUsingPath来沿着这个路径移动一个元素&#xff08;比如一个矩形&#xff09;。 <Window x:Class"WpfApp.MainWindow" xmlns"…...

编程日记 2024/8/15 12:57:26

【C++】classes and object 2.8 取地址及const取地址操作符重载

这两个默认成员函数一般不用重新定义 &#xff0c;编译器默认会生成。 #define _CRT_SECURE_NO_WARNINGS 1 #include <iostream> using namespace std; class Date { public:Date* operator&(){return this;}const Date* operator&()const{return this;} privat…...

编程日记 2024/8/15 12:56:25

milvus helm k8s开启监控

https://milvus.io/docs/monitor.md 文章写的很清晰 &#xff0c;我这边做一下个人补充&#xff0c;初版可能只是配置&#xff0c;具体的grafana 监控报表后期补一下。 架构如下&#xff1a; values.yaml 配置 enabled: true 改为true metrics:enabled: trueserviceMonitor:…...

编程日记 2024/8/15 12:54:23

牛奶饮用学习笔记

1. 常见牛奶类型 1.1 蒙牛-每日鲜语-0脂肪鲜牛奶 项目每100mL NRV%能量146kJ 能量计算 250 mL 146 kJ / 100 mL 365 kJ 250\text{mL}\times146\text{kJ}/100\text{mL} 365\text{kJ} 250mL146kJ/100mL365kJ 1.2 伊利-舒化-高钙型无乳糖牛奶 项目每100mL NRV%能量269kJ …...

编程日记 2024/8/15 12:53:16

php防止页面重复刷新或者重复提交

2.核心代码 显示的逻辑&#xff1a; //获取防止刷新的唯一标识符,start $intFlag substr(md5(time()),6); $strFlag BAOXIAOSS_.$my_user_id.$intFlag; $smarty->assign(check_is_agin_post, $strFlag); //获取防止刷新的唯一标识符,end注意&#xff1a;前端页面提交加入…...

编程日记 2024/8/15 12:51:14

Springboot3 配置sql打印到控制台

一、pom.xml <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-log4j2</artifactId><version>3.1.2</version></dependency> 二、application.yml com.lingyang.system # log4j2配…...

编程日记 2024/8/15 12:50:13

深入理解 GO 语言并发

1. 使用并发 在深入了解 Go 如何处理并发之前，先查看并发的概念。在计算机发展的早期阶段，计算机系统只有一个处理器负责执行所有指令。由于这种体系结构，计算机程序被编写成以串行的方式运行，在这种方式下，程序按照预定义的顺序逐个指令地执行。 随着计算机程序变得越来越…...

编程日记 2024/8/15 12:49:12

leetcode39组合总和

题目描述 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重复被选…...

编程日记 2024/8/15 12:47:09

【JPCS独立出版，EI稳定检索】2024年工业机器人与先进制造技术国际学术会议（IRAMT 2024，9月27-29）

2024年工业机器人与先进制造技术国际学术会议&#xff08;IRAMT 2024&#xff09;将于2024年9月27-29日在中国成都举办。 此次会议将围绕工业机器人、机电技术、机械及制造等领域的最新研究成果展开讨论&#xff0c;并广泛邀请了国内外领域内的著名专家与学者。会议旨在搭建一个…...

编程日记 2024/8/15 12:44:06

Fal.ai Flux 1-Pro/Viva.ai/哩布哩布AI：AI绘图部分免费工具+原图提示词Prompt

目录 #1 找软件 #2 懂提示词 #3 更难的一步&#xff0c;会英文 我个人认为&#xff0c;想要玩文生图&#xff0c;你要会3个步骤&#xff1a; #1 找软件 主流文生图软件&#xff1a;Midjourney、Stable Diffusion、Dall-E 3 巧了&#xff0c;我用的都是小众、免费的画笔工…...

编程日记 2024/8/15 12:42:04

C++学习笔记----2、使用C++进行优雅编程（十）---- 格式化

许多人因为编程风格的问题被搞得焦头烂额&#xff0c;就因为对于在if中使用几个空格争论不休&#xff0c;导致友谊的小船说翻就翻。如果公司有相应的编程规范&#xff0c;只能说你比较幸运。因为有可能你不喜欢这些规范&#xff0c;但做为一个正常人来讲&#xff0c;至少有规范…...

编程日记 2024/8/15 12:41:03

双指针| Java | (hot100) 力扣283, 11, 15, 42做题总结

leetcode 11 盛最多水的容器 双层for循环暴力 超出时间限制 class Solution {public int maxArea(int[] height) {int h0;int v0;for(int i0; i<height.length; i) {for(int ji1; j<height.length; j) {h Math.min(height[i],height[j]);v Math.max(v, h*(j-i));}}…...

编程日记 2024/8/15 12:39:01

matlab求解方程

【MATLAB】求解含有三角函数的方程_matlab求解三角函数方程-CSDN博客 Matlab求解方程或函数的根&#xff0c;root,fzero,solve,fsolve的区别_matlab root-CSDN博客 非线性方程(组)&#xff1a;MATLAB内置函数 solve, vpasolve, fsolve, fzero, roots [MATLAB] - GentleMin - …...

编程日记 2024/8/15 12:36:59

MySQL基础--视图，存储过程

介绍 视图是一种虚拟存在的表&#xff0c;视图中的数据并不在数据库中实际存在&#xff0c;行和列数据来自定义视图的查询中使用的表&#xff0c;并且是在使用视图时动态生成的。 通俗的讲&#xff0c;视图只保存了查询的 SQL 逻辑&#xff0c;不保存查询结果&#xff0c;所以我…...

编程日记 2024/8/15 12:34:58

学习记录第二十六天

进程运行 1&#xff0c;子进程和父进程做相同的事----创建子进程 执行任务 2&#xff0c;子进程做与父进程不同的事 ----fork exec exec族 l VS v :主要是第二个参数的传参方式不同 p :表示寻找可执行文件 是通过PATA环境变量 e : 表示可以给…...

编程日记 2024/8/15 12:33:56

Polars简明基础教程十一：可视化(一)

到本次讲座结束时&#xff0c;你将能够&#xff1a; 使用Polars的内部plot方法从Polars创建图表使用外部绘图库从Polars创建图表了解这些库如何支持Polars 通常&#xff0c;需要可视化库的最新版本来实现最大程度的兼容性 import polars as plimport hvplot as hv import ma…...

编程日记 2024/8/15 12:32:54

实战项目：贪吃蛇游戏的实现（上）

前言 Hello, 今天我们来一起完成一个实战项目&#xff1a;贪吃蛇。 相信大家都不会对这个游戏感到陌生&#xff0c;贪吃蛇游戏是久负盛名的游戏&#xff0c;他和俄罗斯方块&#xff0c;扫雷游戏等游戏位列世界经典游戏之列。这次我们旨在通过实战项目贪吃蛇的实现&#xff0c…...

编程日记 2024/8/15 12:30:51

SHT30温湿度传感器全解析——概况，性能，MCU连接，样例代码

常见温湿度传感器测量范围&#xff1a;(价格仅供参考&#xff0c;具体性能要看折线图) 型号DHT11DHT20AHT10AHT20AHT30SHT20价格&#xffe5; 2.49&#xffe5;3.04&#xffe5; 1.9&#xffe5;1.4&#xffe5; 1.3&#xffe5;5.5温度测量范围20—90%RH0—100%RH0—100%RH0—…...

编程日记 2024/8/15 12:28:49

SQL server 同环比计算模板

1、计算 月 年 季度的环比和同比 计算公式如下&#xff1a; 环比增长率 &#xff08;本期数 - 上期数&#xff09; / |上期数| 100% 同比增长率 &#xff08;本期数 - 同期数&#xff09; / |同期数| * 100% --- dbo.ads_erp_finance_gross_profit_actual_invoice_yoy_m…...

编程日记 2024/8/15 12:24:45

python发送外部请求

在Python中&#xff0c;服务器发送外部请求是一个常见的操作&#xff0c;尤其是在需要集成不同服务或API时。有多种库可以帮助你完成这项任务&#xff0c;但最流行和广泛使用的库之一是requests。以下是如何使用requests库在Python服务器中发送外部请求的基本步骤&#xff1a; …...

编程日记 2024/8/15 12:22:42

c++并发编程面试题

1. C中lock_guard和unique_lock的区别&#xff1f; 在C中&#xff0c;lock_guard和unique_lock都是用于管理互斥锁的类&#xff0c;它们提供了一种 RAII&#xff08;Resource Acquisition Is Initialization&#xff09;机制来确保锁在作用域结束时自动释放。尽管它们的目的相…...

编程日记 2024/8/15 12:18:38

K8S上安装LongHorn(分布式块存储) --use

要在 Kubernetes上安装 LongHorn&#xff0c;您可以按照以下步骤进行操作&#xff1a; 准备工作 参考 官网教程将LongHorn只部署在k8s-worker5节点上。https://github.com/longhorn/longhorn 安装要求 Each node in the Kubernetes cluster where Longhorn is installed must f…...

编程日记 2024/8/15 12:14:34

2024年前端技术发展趋势分析

2024年的前端技术发展趋势继续受到快速变化的技术环境和不断增长的用户期望的影响。以下是2024年前端技术发展的几个关键趋势&#xff1a; 1. Web 组件和自定义元素 Web 组件技术&#xff08;包括 Shadow DOM、HTML Templates 和 Custom Elements&#xff09;正在成为构建可重…...

编程日记 2024/8/15 12:13:32

spring boot 笔记大杂烩

一&#xff0c;springboot项目创建 springboot创建时idea会打开start.spring.io失败报错 可以手动打开这个页面&#xff0c;然后选择maven项目&#xff0c;然后修改group和name名然后添加依赖web&#xff0c;然后生成项目包&#xff0c;解压缩后用idea打开就能用了 运行后报错…...

编程日记 2024/8/15 12:11:30

如何在香港云服务器上优化网站性能？

在香港云服务器上优化网站性能可以通过以下几种方式进行&#xff0c;确保用户从全球各地访问时获得快速、稳定的体验&#xff1a; 1. 使用内容分发网络 (CDN) 优势&#xff1a;CDN可以将静态内容&#xff08;如图像、视频、CSS、JavaScript文件&#xff09;缓存到全球多个节点…...

编程日记 2024/8/15 12:10:28

STM32低功耗与备用备份区域

STM的备份备用区域其实就是两个区块&#xff1a;BKP和RTC。低功耗则其实是STM32四种模式中的三种耗能很低的模式。 目录 一&#xff1a;备用区域 1.BKP 2.RTC 二&#xff1a;低功耗模式 1.睡眠模式&#xff1a; 2.停机模式&#xff1a; 3.待机模式&#xff1a; 一&…...

编程日记 2024/8/15 12:08:26

武汉某汽配公司携手三品软件 共绘PLM项目新蓝图

近日&#xff0c;三品软件与武汉某汽配公司达成战略合作&#xff0c;双方将共同启动PLM项目&#xff0c;以助力该公司在汽车制造业的研发管理领域实现全面升级。 客户简介 该公司自2008年成立以来&#xff0c;一直专注于为汽车制造业提供自动化输送系统、车辆装配的合装技术和…...

编程日记 2024/8/15 12:07:25

uniapp多图上传uni.chooseImage上传照片uni.uploadFile，默认上传9张图

uniapp多图上传uni.chooseImage上传照片uni.uploadFile 代码示例&#xff1a; /**上传照片 多图*/getImage() {uni.chooseImage({count: 9, //默认9sizeType: [original, compressed], //可以指定是原图还是压缩图&#xff0c;默认二者都有sourceType: [album], //从相册选择/…...

编程日记 2024/8/15 12:04:21

为网站制定一个推广计划/快速整站排名seo教程

什么是战略管理&#xff08;P-516&#xff09;–了解 组织战略的4项主要内容&#xff08;P-517&#xff09;–掌握 组织战略的4个类型&#xff08;P-519~P-521&#xff09;–掌握 组织战略的3个层次&#xff08;P-523&#xff09;–掌握 组织战略从范围角度的3个层次分类&#…...

编程日记 2025/1/16 5:12:17

微网站做下载链接/成都优化官网公司

在前面一篇文章中介绍了fastfds的简单安装和文件上传功能&#xff0c;以及使用fastdfs自带的http下载功能等&#xff1b;本文中将介绍如何使用fastdfs-apache-module模块整合fastdfs和apahce&#xff1b;整合完毕后&#xff0c;客户端访问apache&#xff0c;apache根据配置&…...

编程日记 2025/1/16 2:26:54

wordpress dux5.3/怎么请专业拓客团队

手机版首页更新操作需要修改模板路径&#xff0c;如图所示&#xff0c;修改后&#xff0c;点击更新主页HTML这样&#xff0c;大功造成了&#xff0c;可以生成手机版首页如果觉得这样改每次都比较麻烦&#xff0c;有两种方法&#xff0c;第一&#xff0c;自己修改的方法&#xf…...

编程日记 2025/1/16 2:15:49

做网站开发找哪家公司/排名优化公司口碑哪家好

tcp是流式传输 假设A给B通过TCP发了200字节&#xff0c; 然后又发了300字节&#xff0c; 此时B调用recv&#xff08;设置预期接受1000个字节&#xff09;&#xff0c;那么请问B实际接受到多少字节&#xff1f; 根据tcp粘包特性&#xff0c;可知&#xff0c; B端调用一次recv&am…...

编程日记 2025/1/16 1:45:30

有没有网站找人帮忙做图/企业网站排名优化价格

我们今天所熟悉的数字音乐来自1999年的Napster。通过Napster&#xff0c;你可以免费从网上下载MP3音乐文件&#xff0c;毫无疑问&#xff0c;此举遭到了唱片公司的封杀&#xff0c;在往后的两年中&#xff0c;唱片公司一直在试图扑灭数字音乐之火&#xff0c;直到2001年。 2001…...

编程日记 2025/1/15 23:52:43

wordpress 语言设置中文/郑州百度seo排名公司

我是一名即将毕业的计算机专业毕业生&#xff0c;大四的时候去一个软件公司实习&#xff08;规模600人左右&#xff09;&#xff0c;做了一年的javaEE开发&#xff0c;实实在在地干活&#xff0c;也确实入了java的门&#xff0c;加上大学期间的学习&#xff0c;感觉对于java领域…...

编程日记 2025/1/15 16:12:03