px、em、rem、rpx 作用和用法详解

px
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点

IE无法调整那些使用px作为单位的字体大小;
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
Firefox能够调整px和em,rem,但是96%以

em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 EM特点

em的值并不是固定的;
em会继承父级元素的字体大小。
注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
所以我们在写CSS的时候,需要注意两点:

上的中国网民使用IE浏览器(或内核)。

body {font-size: 62.5%;
}.banner {width: 30em;
}

rem
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。

前端使用rem的实例
以下例子中都是 1rem = 100px,即rem=设计稿尺寸/100。之所以不配置成1rem=1px,是因为浏览器一般都有最小字体限制,比如chrome,最小中文字体是12px,所以实际上没有办法让1rem = 1px。

在html 中使用

<script>const pcDesignWidth = 1440;const mobileDesignWidth = 750;document.documentElement.style.fontSize = window.innerWidth * 100 / (window.innerWidth > mobileDesignWidth ? pcDesignWidth : mobileDesignWidth) + 'px';/*如果只适配一端const designWidth = xxxdocument.documentElement.style.fontSize = window.innerWidth * 100 / designWidth + 'px'*/
</script>
function getInitStyle() {const width = window.document.documentElement.clientWidth > 768 ? 768 : window.document.documentElement.clientWidth;const height = window.document.documentElement.clientHeight;const maxWidth = (window.document.documentElement.clientWidth <= 768 || height * 2 / 3 > width) ? width : height * 2 / 3;document.documentElement.style.fontSize = `${maxWidth * 100 / 750}px`;document.body.style.width = `${maxWidth}px`;
}

rpx
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
rpx 为小程序中使用的相对单位,用法和rem类似, 1rpx = 屏幕宽度/750 px, 所以在屏幕宽度为750的设计稿中,1rpx = 1px。

 

 

 

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

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

相关文章

JVM原理(四):JVM垃圾收集算法与分代收集理论

从如何判定消亡的角度出发&#xff0c;垃圾收集算法可以划分为“引用计数式垃圾收集”和“追踪式垃圾收集”两大类。 本文主要介绍的是追踪式垃圾收集。 1. 分代收集理论 当代垃圾收集器大多遵循“分代收集”的理论进行设计&#xff0c;它建立在两个假说之上&#xff1a; 弱分…

C++11中如何创建线程

在C11中&#xff0c;创建线程变得非常简单和标准化&#xff0c;因为C11引入了线程库&#xff08;<thread>&#xff09;。这个库提供了std::thread类&#xff0c;使得创建和管理线程变得更加直接和方便。 以下是如何在C11中创建线程的基本步骤&#xff1a; 包含线程库&a…

重建控制文件

----------------------------------------------------以下是单节点--------------------------------------------------- 一、现象 1、某次测试环境数据库重启&#xff0c;报如下错误 ORA-38760: This database instance failed to turn on flashback database 启动到mo…

C# 特性 Attribute 反射 Reflection 元数据 Metadata 未完

在C#中&#xff0c;元数据&#xff08;Metadata&#xff09;是指与程序代码本身相关的数据&#xff0c;这些数据提供了代码的额外信息&#xff0c;但并不直接影响代码的执行。元数据在.NET框架中扮演着重要的角色&#xff0c;以下是一些常见的元数据类型和它们的用途&#xff1…

vue插槽的简单使用

默认插槽 1.在Category中创建插槽 <slot>默认值<slot/> 2.在App中使用 <Category tittle"美食"> <ul ><li v-for"(l,index) in foods" :key"index">{{l}}</li></ul> </Category> 3.运行后的…

【IC验证】UVM实验lab05

1. 寄存器建模的要点和顺序 1.1 寄存器创建 定义单个uvm_reg&#xff0c;各个域的确定&#xff0c;并利用configure函数来配置属性&#xff1b; class ctrl_reg extends uvm_reg;uvm_object_utils(ctrl_reg)/*uvm_reg;uvm_mem;uvm_reg_map;uvm_reg_block都继承于uvm_object类…

八、浏览器同源策略

上一篇&#x1f449;: 浏览器垃圾回收机制 文章目录 浏览器同源策略1.同源策略的定义2.同源策略的作用3.同源策略的限制范围4.解决跨域方案汇总1.CORS&#xff08;跨源资源共享&#xff09;2.JSONP3.postMessage 跨域4.Nginx代理跨域5.Node.js中间件代理跨域6.document.domain…

【教学类65-04】20240625秘密花园涂色书04(通义万相)(图纸16:9,A4横板1张,一大168张纸168份)

背景需求 【教学类65-01】20240622秘密花园涂色书01&#xff08;通义万相&#xff09;&#xff08;A4横版2张&#xff0c;一大3小 38张纸76份&#xff09;-CSDN博客文章浏览阅读118次。【教学类65-01】20240622秘密花园涂色书01&#xff08;通义万相&#xff09;&#xff08;A…

老年人能力评估系统:在居家养老中的作用

随着人口老龄化趋势的加剧&#xff0c;居家养老成为了许多老年人的首选。为了满足居家养老中老年人能力评估的需求&#xff0c;提高评估质量和效果&#xff0c;老年人能力评估系统应运而生。本文将为您介绍老年人能力评估系统在居家养老中的作用&#xff0c;让您了解这个在居家…

Ubuntu 截图shutter,图像编辑 gimp,录屏kazam

1.截图&#xff1a; Shutter 安装shutter命令&#xff1a; sudo add-apt-repository ppa:shutter/ppasudo apt-get updatesudo apt-get install shutter 2.图片编辑&#xff1a;Gimp, Kolourpaint, Pinta gimp全名为&#xff1a;GNU Image Manipulation Program&#xff0c…

操作系统-文件的物理结构(文件分配方式)

文章目录 总览文件块和磁盘块连续分配顺序访问直接访问&#xff08;随机访问&#xff09;为什么连续分配同时支持这两种访问模式&#xff1f; 链接分配隐式链接显示链接小结索引分配链接方案多层索引混合索引小结 总结 总览 文件数据存放在外存中 文件块和磁盘块 文件内通过逻…

万字长文详解数据结构:树 | 第6章 | Java版大话数据结构 | 二叉树 | 哈夫曼树 | 二叉树遍历 | 构造二叉树 | LeetCode练习

&#x1f4cc;本篇分享的大话数据结构中&#x1f384;树&#x1f384;这一章的知识点&#xff0c;在此基础上&#xff0c;增加了练习题帮助大家理解一些重要的概念✅&#xff1b;同时&#xff0c;由于原文使用的C语言代码&#xff0c;不利于学习Java语言的同学实践&#xff0c;…

Linux中使用网络文件系统NFS挂载远程目录,对远程文件的本地化操作

目录 一、NFS及其在linux系统中的挂载 1、NFS概述 2、NFS挂载及其作用 &#xff08;1&#xff09;资源共享 &#xff08;2&#xff09;简化数据管理 &#xff08;3&#xff09;提高数据可用性 &#xff08;4&#xff09;灵活性 &#xff08;5&#xff09;访问控制 &am…

Elasticsearch 避免常见查询错误和陷阱

Elasticsearch 作为一款强大的搜索引擎和分析工具&#xff0c;已经被广泛应用于各种场景中。然而&#xff0c;在使用 Elasticsearch 进行查询时&#xff0c;如果不注意一些常见的错误和陷阱&#xff0c;可能会导致查询效率低下、结果不准确甚至系统性能下降。本文旨在总结一些常…

web刷题记录(7)

[HDCTF 2023]SearchMaster 打开环境&#xff0c;首先的提示信息就是告诉我们&#xff0c;可以用post传参的方式来传入参数data 首先考虑的还是rce&#xff0c;但是这里发现&#xff0c;不管输入那种命令&#xff0c;它都会直接显示在中间的那一小行里面&#xff0c;而实际的命令…

工业自动化控制中心

目录 一 设计原型 二 后台源码 一 设计原型 二 后台源码 using System; using System.Threading; using System.Threading.Tasks; using System.Windows.Forms;namespace 工业自动化控制中心 {public partial class Form1 : Form{public Form1(){InitializeComponent();}pri…

数据结构与算法笔记:高级篇 - 搜索:如何用 A* 搜索算法实现游戏中的寻路功能?

概述 魔兽世界、仙剑奇侠传这类 MMRPG 游戏&#xff0c;不知道你玩过没有&#xff1f;在这些游戏中&#xff0c;有一个非常重要的功能&#xff0c;那就是任务角色自动寻路。当任务处于游戏地图中的某个位置时&#xff0c;我们用鼠标点击另外一个相对较远的位置&#xff0c;任务…

无线WiFi毫米波雷达传感器成品,智能照明人体感应开关,飞睿智能点亮智慧生活

在智能科技飞速发展的今天&#xff0c;我们的生活正被各种智能设备所包围&#xff0c;其中智能照明作为智能家居的重要组成部分&#xff0c;正逐渐改变着我们的生活方式。而在这背后&#xff0c;有一个默默工作的“小助手”——飞睿智能毫米波雷达传感器&#xff0c;它就像智能…

面试官:10W QPS高并发下,如何防止重复下单?

核心问题 10W QPS&#xff1a;每秒10万次请求&#xff0c;高并发场景。重复下单&#xff1a;用户因网络问题、系统重试、误操作等原因提交多次相同订单。 电商订单支付核心流程 用户下单&#xff1a;选择商品&#xff0c;提交订单。订单确认&#xff1a;系统生成订单号&…

考后热门三件套 国漫年番加点料

学生时代&#xff0c;最开心的莫过于寒暑假&#xff0c;而比寒暑假更开心的必须是升学考后的假期&#xff01;很多同学的考后三件套&#xff1a;聚餐、旅游和学车&#xff01;同样有许多同学开启了补番计划&#xff0c;今天就给大家推荐4部暑期必看的年番&#xff0c;各种类型兼…