CSS3中的px,em,rem,vh,vw辨析

最新推荐文章于 2024-01-22 14:09:41 发布
转载 最新推荐文章于 2024-01-22 14:09:41 发布 · 156 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.mk2048.com/blog/blog.php?id=b00111jcb&title=CSS3%E4%B8%AD%E7%9A%84px%2Cem%2Crem%2Cvh%2Cvw%E8%BE%A8%E6%9E%90
文章标签：

#HTML/CSS

本文深入解析了CSS中的五种常用单位：px、em、rem、vh和vw。详细介绍了每种单位的特点、应用场景及它们之间的区别，例如rem相对于em的根元素特性，vh/vw与视口尺寸的关系。

1、px：像素，精确显示

2、em：继承父类字体的大小，相当于“倍”，如：浏览器默认字体大小为16px=1em，始终按照div继承来的字体大小显示，进场用于移动端

          em换算工具：http://www.runoob.com/tags/ref-pxtoemconversion.html

3、rem：与em类似，rem是继承根节点的属性（即<html>标签），其他的与em相同

4、vh：当前可见高度的1%=1vh

          区别是：当div中没有内容时，height=100%，则高度不显示出来

                     当div中没有内容时，height=100vh，则高度依然能显示出来

5、vw：当前可见宽度的1%=1vw

          区别是：当div中没有内容时，width=100%，则宽度不显示出来

                     当div中没有内容时，width=100vh，则宽度依然能显示出来

 

【高频考点精讲】CSS 中的单位解析：px、em、rem、vw、vh 的使用场景
全栈老李的博客
05-14 1127
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS中那些让人又爱又恨的单位——px、em、rem、vw、vh。作为前端工程师，这些单位就像厨房里的调味料，用对了能让页面美味可口，用错了...嗯，你懂的。（全栈老李友情提示：文末有面试题彩蛋，记得看到最后哦～）
前端css高频面试题——em/px/rem/vw/vh的区别？
weixin_47450807的博客
04-06 601
一、px px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大 小等同的，所以像素为计量单位被分在了绝对长度单位中。有些人会把px认为是相对 长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的。这里之 所以认为px为绝对单位，在于px的大小和元素的其他属性无关。 二、em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺 寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。为了简化 font-size 的换算，我们需
css中的px、em、rem 详解
leejj_520的博客
04-15 955
注：本文章转自http://www.mamicode.com/info-detail-655497.html，侵权删 概念介绍： 1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，App
html----rem结合vw布局
weixin_33756418的博客
02-20 216
1.rem rem是相对于根元素的字体大小的单位rem能等比例适配所有的屏幕，根据html的字体的大小来控制rem的大小 2.dpr设备像素比 dpr = 物理像素 / 逻辑像素物理像素：设计图量出的px（设备显示的px）逻辑像素：css中设置的px如果设计图的宽度是640px 或者 750px dpr = 2如果设计图的宽度是1080px dp...
css3计量单位之px、em、rem
qq_51781439的博客
08-17 421
一、px为具体的长度单位，表示一个像素点，是一个绝对尺寸 二、em、rem都是倍数的意思，其尺寸是相对的 1.em相对于父级的font-size的倍数 2.rem相对于根元素，即html的font-size的倍数 例如下列示例中，p1的宽就是300px,p2的宽就是400px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
css3_关于px、em、rem的区别详解
QiuRenBB的博客
03-02 423
前言 在CSS中，尺寸单位分为两类：相对长度单位和绝对长度单位。 相对长度单位：按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。 字体相对单位：em、ex、ch、rem； 视窗相对单位：vw、vh、vmin、vmax。 绝对长度单位：则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。 px单位   px是像素单位，也是绝对长度单位的一种。也就是说它的尺寸是固定的，
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
本文将深入探讨CSS中五个常用的长度单位：px、rem、em、vh和vw，以及它们之间的差异。 1. **像素单位px**： 像素px是最基础的单位，它是一个固定的长度单位，类似于物理世界中的米或厘米。在屏幕上，1px代表显示器...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
01-21
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。 (另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-...
利用vw做rem适配（纯css）
weixin_30682127的博客
02-15 248
vw：相对于视口的宽度。视口被均分为100单位的vw；我在想，既然vw是相对于视口的宽度，又因为视口的宽度是不固定的，那么可以用vw来做到rem适配吗？下面是测试的截图：（如果是用手机看的，因为自动把图片缩放了，所以看着字体大小一样） 还有个问题，就是应该有个px与vw的换算比例吧，我又看了看。 假如ui图的宽度为1920px，又因为vw会把宽度分为100份，那1vw=19.2px...
css中单位px、pt、em和rem的区别
热门推荐
kataerdeshui的专栏
05-23 2万+
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？ px ：像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) px 特点： 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3
CSS3 px、em、rem 的使用与区别
卡尔特斯
01-18 231
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html { font-size: 10px;
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
橙-极纪元-JJYCheng
06-22 9887
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
CSS3 的单位vw、vh、px，em，rem
丁哒哒的博客
10-24 829
1、px px其实就是像素的意思，全称pixel，也就是图像的基本采样单位。对于不同的设备，它的图像基本单位是不同的，比如显示器和打印机。而我们通常所说的显示器分辨率是指桌面设定的分辨率，不是显示器的物理分辨率，但是现在我们的桌面分辨率和物理分辨率几乎是一致的，因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自...
html vh和百分比,css 100vh等于多少？
weixin_39924779的博客
06-22 4461
css 100vh等于多少？vh是css中的一个相对长度单位，相对于视窗的高度, 视窗被均分为100单位的vh，即1vh永远等于当前视窗高度的百分之一。视区所指为浏览器内部的可视区域大小， 即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。因此，100vh就等于当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。拓...
html视口单位：vw,vh,rem
蹦极的考拉
08-14 2333
前言 不像响应式布局，通过media query，设置几个变化点来适配，流体排版通过调整大小，适配所有设备宽度。这个方法可以使我们开发的网页，在几乎所有屏幕尺寸上都可以使用。但出于一些原因，它的使用率还远远没有响应式技术高。 在印刷的历史上，排版是根深蒂固的。关于“流体”的概念，在传统思想里并不存在。这是因为，在印刷上，尺寸大小都是有固定的，不用考虑在页面上使用。我认为流体排版技术可以和网页很好...
html vh和百分比,css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位...
weixin_31689491的博客
06-22 3778
css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位height:100vh一些只能vw, vh才能完成的应用场景：1. 场景之：元素的尺寸限制vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。这类限制的实现，在当下，需...
html中，元素width和height的单位px、cm、mm、in、pc、pt、ch、em、rem、vh、vw、vmin、vmax的含义
yhj198927的博客
01-22 6139
在 HTML 中，元素的 width 和 height 属性可以使用多种单位来表示尺寸。
px em rem vw vh是什么关系
最新发布
09-24
px、em、rem、vw、vh都是CSS中用于表示长度或尺寸的单位，它们之间既有区别又存在一定联系。 ### 与固定单位px的关系 px是固定像素单位，不随其他元素的尺寸变化而变化，是一个绝对单位，常用于设置边框、固定尺寸...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值