px、em、rem、vw、vh、vm这些单位的区别

简介: 学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~如果大家喜欢,可以点赞或留言💕~~~~,谢谢大家⭐️⭐️⭐️~~~
学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~
如果大家喜欢,可以点赞或留言💕 ~~,谢谢大家⭐️⭐️⭐️~

一.px

1.相对长度单位。相对于显示器屏幕分辨率而言。
2.存在浏览器不兼容问题。

二.em

1.相对长度单位。相对于当前对象内文本字体尺寸。
2.em值并不是固定的,em会继承父级元素的大小.
3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px;如果父级设置font-size为30px. 1em=30px. 2em=60px.
4.存在容易造成字体设置混乱问题。

三.rem

1.相对长度单位。相对于根节点html字体大小来计算。任意浏览器默认字体高都是16px.
2.如果html根节点设置字体font-size为100px. 则1em=100px. 2em=200px. 跟父级字体无关。
3.浏览器兼容性比较好。

四.vm 和vh

vm:css3新单位,view width的简写,相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度

vh:css3新单位,view height的简写,相对于视口的高度。视口被均分为100单位的vh (即浏览器可视区) 100vh  = 可视区高度

假设设计稿尺寸为1920*1080

即:
网页宽度=1920px
网页高度=1080px
我们都知道
网页宽度=100vw
网页高度=100vh
所以,
在1920x*1080px的屏幕分辨率下
1920px = 100vw
1080px = 100vh

举个例子:浏览器高度1200px, 1 vh = 1200px/100 = 12 px。
举个例子:浏览器高度1200px,宽度1200px,取最小的浏览器高度,1 vm = 1200px/100 = 12 px。

目录
相关文章
|
JavaScript
Vue中的provide和inject的使用场景是什么?
Vue中的provide和inject的使用场景是什么?
394 3
|
定位技术 API 开发工具
Android 按照步骤接入百度地图API,定位显示不了解决办法
Android 按照步骤接入百度地图API,定位显示不了解决办法
625 1
vw、px、vh 和 rem应用场景以及区别
【4月更文挑战第2天】 vw、px、vh 和 rem应用场景以及区别
1346 10
|
缓存
如何清除keep-alive缓存
如何清除keep-alive缓存
741 6
|
缓存 安全 JavaScript
前端安全:Vue应用中防范XSS和CSRF攻击
【4月更文挑战第23天】本文探讨了在Vue应用中防范XSS和CSRF攻击的重要性。XSS攻击通过注入恶意脚本威胁用户数据,而CSRF则利用用户身份发起非授权请求。防范措施包括:对输入内容转义、使用CSP、选择安全的库;采用Anti-CSRF令牌、同源策略和POST请求对抗CSRF;并实施代码审查、更新依赖及教育团队成员。通过这些实践,可提升Vue应用的安全性,抵御潜在攻击。
1333 0
|
JSON 数据格式
Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 14 of the JSON data问题如何处理
【6月更文挑战第15天】Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 14 of the JSON data问题如何处理
545 5
|
10月前
|
人工智能 自然语言处理 安全
亲测有效:claude入口_claude官网入口_国内使用claude的两种方法
Claude,作为 Anthropic 公司潜心研发的杰作 ✨,凭借其卓越的自然语言处理能力、深刻的上下文理解和无懈可击的安全性 🛡️,在人工智能领域熠熠生辉。然而,由于一些客观因素的限
|
XML 数据可视化 Java
Android布局——线性布局、相对布局、帧布局、表格布局、网格布局、约束布局
Android布局——线性布局、相对布局、帧布局、表格布局、网格布局、约束布局
570 1
|
10月前
|
机器学习/深度学习 数据采集 人工智能
智能运维:从自动化到AIOps的演进与实践####
本文探讨了智能运维(AIOps)的兴起背景、核心组件及其在现代IT运维中的应用。通过对比传统运维模式,阐述了AIOps如何利用机器学习、大数据分析等技术,实现故障预测、根因分析、自动化修复等功能,从而提升系统稳定性和运维效率。文章还深入分析了实施AIOps面临的挑战与解决方案,并展望了其未来发展趋势。 ####
|
11月前
Threejs绘制方形管道
这篇文章讲解了如何在Three.js中创建和渲染方形管道,包括建立几何体、应用材质以及进行场景中的定位和渲染等步骤。
211 0
Threejs绘制方形管道