px,em,rem,vw,vh之间的区别

简介: px,em,rem,vw,vh之间的区别

一,px(像素):像素是屏幕上显示的最小单位,它是固定的,不随页面缩放而改变大小。在响应式设计中,使用像素单位可能会导致布局在不同屏幕尺寸上显示不一致。


例如:现在在你电脑上一个字为16px,大小正好,可能到比你分辨率要高的电脑上,字体16px大小不变,但是分辨率有变化,导致字体在别的电脑上可能会导致不适配的情况发生


二,em:em是相对长度单位,它是相对于父元素字体大小的倍数。如果父元素的字体大小为16px,1em就等于16px。em单位的缺点是,当嵌套元素多层时,计算起来可能会变得复杂。


例如:这个就很好理解,就是1em就是父元素的一整个字体大小,当然,嵌套的多了容易搞混,尽量不要在嵌套多个元素的时候使用em,个人认为不太好用


三,rem:rem也是相对长度单位,但它是相对于根元素(html元素)字体大小的倍数。这意味着1rem始终等于根元素的字体大小,不受父元素影响。因此,rem更适合用于响应式设计。


例如:这个跟em的区别就是他不是看父元素,而是看根元素,因为不受父元素的影响,所以适用于自适应

四,vw(视窗宽度单位):vw是相对于视窗宽度的百分比单位,1vw等于视窗宽度的1%。它常用于创建响应式布局,使元素的大小根据视窗宽度自动调整。


例如:1vw就是根据可视窗口的宽度来进行适配自动调整的。一般是用于可视窗口宽度间的适配


五,vh(视窗高度单位):vh类似于vw,不同之处在于它是相对于视窗高度的百分比单位,1vh等于视窗高度的1%。vh也常用于响应式设计中。


例如:vh跟vw是一样的,但是vh一般是用于可视窗口高度间的适配的


总的来说,rem和em是相对长度单位,而px、vw和vh是绝对或相对绝对长度单位。在网页设计中,选择合适的单位取决于具体的布局需求和设计目标。

 

相关文章
|
消息中间件 存储 监控
自顶向下学习 RocketMQ(十):消息重投和消息重试
生产者在发送消息时,同步消息失败会重投,异步消息有重试,oneway 没有任何保证。消息重投保证消息尽可能发送成功、不丢失,但可能会造成消息重复,消息重复在 RocketMQ 中是无法避免的问题。消息重复在一般情况下不会发生,当出现消息量大、网络抖动,消息重复就会是大概率事件。另外,生产者主动重发、consumer 负载变化也会导致重复消息。
自顶向下学习 RocketMQ(十):消息重投和消息重试
|
10月前
|
存储 程序员 编译器
C 语言中的数据类型转换:连接不同数据世界的桥梁
C语言中的数据类型转换是程序设计中不可或缺的一部分,它如同连接不同数据世界的桥梁,使得不同类型的变量之间能够互相传递和转换,确保了程序的灵活性与兼容性。通过强制类型转换或自动类型转换,C语言允许开发者在保证数据完整性的前提下,实现复杂的数据处理逻辑。
|
6月前
|
人工智能 监控 安全
开源AI守护后厨——餐饮厨房视频安全系统的技术解析
餐饮厨房视频安全系统是一套融合开源AI技术与视频监控的智能化解决方案,涵盖实时检测、行为监测、数据分析、公众透明化及反馈闭环五大模块。系统通过YOLOv8、ResNet等算法实现后厨卫生与操作规范的精准监控,识别率达97%,问题响应时间缩短至秒级。同时支持后厨直播与监管对接,提升消费者信任和管理效率。其灵活开源的特点,为食品行业安全管理提供了高效、透明的新路径,未来可扩展至食品加工等领域。
460 0
|
5月前
|
数据采集 Web App开发 前端开发
Python+Selenium爬虫:豆瓣登录反反爬策略解析
Python+Selenium爬虫:豆瓣登录反反爬策略解析
|
存储 Python
使用 struct 模块打包/解包二进制数据
使用 struct 模块打包/解包二进制数据
259 2
|
9月前
|
API Anolis 开发者
Intel® oneAPI 在龙蜥社区里面的支持情况分享|龙蜥大讲堂116期
本次分享的主题是 Intel® oneAPI 在龙蜥社区里面的支持情况分享。主要分为四个部分: 1. What is Intel® oneAPI 2. Intel® oneAPI infrastructure 3. Anolis Intel® oneAPI enabling status 4. Qwen2 demo
208 0
|
11月前
|
人工智能 自然语言处理 关系型数据库
客户说|宝宝树选用AnalyticDB RAG引擎,共创智能母婴生活新范式
宝宝树与阿里云深度合作,利用大数据和AI技术,推出了一系列智能化产品,如AI解读B超单、AI起名等,覆盖备孕、孕期、产后等场景,提升了用户体验,推动了商业化进程。通过技术架构的优化,宝宝树在内容生产和搜索精度上取得了显著成效,未来将继续深化“AI+母婴”战略,为用户提供更全面、个性化的服务。
|
存储 并行计算 安全
超级计算机:探索宇宙奥秘与解决复杂问题的利器
【9月更文挑战第14天】超级计算机作为计算科学的巅峰之作,以其卓越的计算能力和庞大的数据存储能力,助力科学家深入探索宇宙奥秘并解决复杂问题。本文介绍了超级计算机的定义、发展历程及关键技术,并详细探讨了其在宇宙学模拟、生物学研究、气候研究和工程技术等领域的广泛应用。尽管面临能耗、数据传输等挑战,但其未来前景光明,有望在量子计算等前沿技术推动下继续引领科技创新。
|
SQL 机器学习/深度学习 存储
PostgreSQL逻辑备份pg_dump使用及其原理解析
PostgreSQL逻辑备份pg_dump使用及其原理解析
434 0
|
架构师 测试技术
【业务架构】业务架构师如何构建业务能力图?
【业务架构】业务架构师如何构建业务能力图?
【业务架构】业务架构师如何构建业务能力图?

热门文章

最新文章