css rem之2024

话题开始前


我们都知道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了

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

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

相关文章

python网络爬虫使用代理

Python网络爬虫使用代理的实用指南 在网络爬虫的开发过程中,使用代理是一个非常重要的环节。代理不仅可以帮助爬虫绕过反爬虫机制,还能保护开发者的隐私。本文将介绍如何在Python中使用代理进行网络爬虫,包括基本的设置和示例代码。 1. 代理…

WordPress多用途电子商务博客新闻主题betheme 21.5.6版本

简介: WordPress多用途电子商务博客新闻主题betheme 21.5.6版本 自带500多套模板 BeTheme第一次发布于2014年5月21日,自那时以来,已有数以百万计的人下载了BeTheme,其评分为4.8。 这个主题是WooCommerce支持的,在此…

Git代码管理规范

1. 简介 git 分支分为集成分支、功能分支和修复分支,分别命名为 develop、feature 和 hotfix,均为单数。不可使用 features、future、hotfixes、hotfixs 等错误名称。 master(主分支,永远是可用的稳定版本,不能直接在…

mybatis xml 动态sql相关语法

<?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace"com.xiaKangan.mapper.EmpMapper&qu…

JavaScript 文档元素获取

目录 通过id获取文档元素 任务描述 相关知识 什么是DOM 文档元素 节点树 通过id获取文档元素 编程要求 通过类名获取文档元素 任务描述 相关知识 通过类名获取文档元素 编程要求 通过标签名获取文档元素 任务描述 相关知识 通过标签的名字获取文档元素 获取标…

android13 关闭selinux 临时关闭或者永久关闭

总纲 android13 rom 开发总纲说明 目录 1.前言 2.情况分析 2.1 临时关闭 2.2 永久关闭 3.修改方法 3.1 临时修改 3.2 永久关闭 4.编译测试 5.彩蛋 1.前言 在Android操作系统中,SELinux(Security-Enhanced Linux)是一种安全模块,用于提供强制访问控制(MAC)安全…

IDEA自定义注释模版

1.类&#xff08;接口/枚举等同理&#xff09; 2.方法模版 先自定义一个模版组&#xff0c;然后在里面添加模版名&#xff0c;触发快捷键&#xff08;Tab/Enter&#xff09;&#xff0c;模版描述&#xff0c;哪些语言中应用 模版中的自定义参数params和returns可以自动展开参数…

Linux学习记录(五)-------三类读写函数

文章目录 三种读写函数1.行缓存2.无缓存3.全缓存4.fgets和fputs5.gets和puts 三种读写函数 1.行缓存 遇到新行&#xff08;\n&#xff09;,或者写满缓存时&#xff0c;即调用系统函数 读&#xff1a;fgets,gets,printf,fprintf,sprintf写&#xff1a;fputs,puts,scanf 2.无缓…

Golang | Leetcode Golang题解之第328题奇偶链表

题目&#xff1a; 题解&#xff1a; func oddEvenList(head *ListNode) *ListNode {if head nil {return head}evenHead : head.Nextodd : headeven : evenHeadfor even ! nil && even.Next ! nil {odd.Next even.Nextodd odd.Nexteven.Next odd.Nexteven even.N…

贷齐乐系统sql注入漏洞

目录 源码 代码流程 payload编写 全局污染 php小特性 注入思路 payload构造 获取数据库名&#xff0c;这里是不可以使用database的因为括号被过滤乐 在information中查询数据库名 然后获取表名 获取数据 源码 <?php header("Content-type: text/html; char…

基于ssm+vue+uniapp的网上商城小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…

mac要装虚拟机吗

在Mac上安装虚拟机可以带来多种好处&#xff0c;‌但同时也存在一些潜在的影响。‌ 首先&#xff0c;‌虚拟机技术允许在同一设备上运行多个操作系统&#xff0c;‌这对于需要测试不同操作系统兼容性的开发者和IT专业人员来说非常有用。‌此外&#xff0c;‌虚拟机还能解决软件…

fastadmin自定义弹框,以及回调函数等问题,

效果图 1&#xff0c; 代码 弹框中使用弹框 弹框1代码主要代码 <div class"form-group ccol-xs-12 col-sm-2" style"text-align: right"><a href"#" data-url"{:url(user/add)}" class"btn btn-info" id"a…

【多线程】如何实现三个线程循环打印ABC

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. 如何实现三个线程顺序打印ABC1.1 详细要求描述1.2 使用join()1.3 实现代码1.4 运行结果 2. 如何实现三个线…

小白零基础学数学建模系列-Day6-微分方程模型基础与案例

文章目录 1 微分方程模型概述1.1 微分方程的基本概念和分类1.2 微分方程在科学计算中的重要性1.3 使用Python进行微分方程建模的优势 2 Python在微分方程建模中的应用2.1 常用Python库介绍2.2 Python的符号计算与解析解2.3 Python的数值计算与数值解 3 解微分方程的基本方法与P…

【大学物理】第7章 机械波,平面简谐波的方程,能流密度,惠更斯原理,波的叠加原理,波的干涉,驻波,多普勒原理(清华大学)

目录 7-1 波的基本概念 一、机械波产生的条件 二、横波和纵波 三、波线和波面 四、简谐波 五、物体的弹性形变* 1. 长变 2. 切变 3.容变 六、描述波动的几个物理量 1.波速 u 2.波动周期和频率 3.波长入 7.2 平面简谐波的方程 一、平面简谐波的波动方程 1.一…

即时通讯系统选型:如何为企业选择最佳的私有化即时通讯工具

在企业内部沟通和协作中&#xff0c;选择适合的即时通讯工具对于保障数据安全和提高工作效率至关重要。随着私有化即时通讯工具的出现&#xff0c;企业可以更好地掌握自身数据和系统&#xff0c;并提供更高的安全性和定制化能力。本文将为您提供一些指导&#xff0c;帮助企业选…

数学建模学习笔记

数学建模学习笔记 现学现卖&#xff0c;随缘更新QwQ 主要根据b站大师兄的视频整理而成&#xff0c;有不懂的可以去看原视频 List 数学建模学习笔记一、 层次分析法1.1 矩阵的一致性及其检验1.2 权重计算1.3 具体流程 二、模糊综合评测2.1 隶属函数2.2 隶属函数的确定方法2.3 模…

LeetCode 热题 HOT 100 (031/100)【宇宙最简单版】

【二叉树】No. 0437 路径总和 III【中等】&#x1f449;力扣对应题目指路 希望对你有帮助呀&#xff01;&#xff01;&#x1f49c;&#x1f49c; 如有更好理解的思路&#xff0c;欢迎大家留言补充 ~ 一起加油叭 &#x1f4a6; 欢迎关注、订阅专栏 【力扣详解】谢谢你的支持&am…

开发者账号验证难题,身份证居然不管用了!聊聊怎么搞定地址证明

最近不少开发者遇到了一个棘手的问题&#xff1a;Google Play的开发者账号验证突然变得更难了&#xff0c;尤其是身份证竟然不能再作为地址证明用了&#xff01; 今天分享一下开发者朋友们成功的经历和一些实用的小技巧&#xff0c;希望能帮大家顺利通过Google Play的身份验证。…