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是绝对或相对绝对长度单位。在网页设计中,选择合适的单位取决于具体的布局需求和设计目标。

 

相关文章
|
存储 程序员 编译器
C 语言中的数据类型转换:连接不同数据世界的桥梁
C语言中的数据类型转换是程序设计中不可或缺的一部分,它如同连接不同数据世界的桥梁,使得不同类型的变量之间能够互相传递和转换,确保了程序的灵活性与兼容性。通过强制类型转换或自动类型转换,C语言允许开发者在保证数据完整性的前提下,实现复杂的数据处理逻辑。
|
7月前
|
存储 前端开发 搜索推荐
内容,内容资产,以及内容即服务
内容是指在媒体、平台或者其他载体上所呈现的信息、文章、图片、视频、音频等形式的表达。内容可以是有关某个特定主题或领域的知识、观点、故事、娱乐等,通过文字、图像、声音等方式传达给用户或观众。在互联网时代,内容的重要性越来越突出,各种网站、应用和社交媒体平台都以提供优质内容为目标,吸引用户关注和参与。
365 3
小红书批量收藏点赞评论脚本,私信群发插件导入ID,可养号也可以引流
这是一款功能强大的小红书引流插件,支持多账号操作,可实现批量私信、点赞、收藏、评论等营销功能,非常适合微商群体
|
7月前
|
监控 数据可视化 算法
基于高德MCP2.0的智能旅游攻略系统设计与实现
MCP2.0(Map-based Collaborative Planning)是新一代旅游攻略系统,通过Web端可视化界面与高德地图API深度集成,实现了从静态攻略到动态智能规划的升级。系统核心功能包括可视化地图生成、高德地图APP深度集成、智能行程规划、实时路况优化和多端同步。技术栈采用Vue.js、Node.js、MongoDB和WebSocket,支持实时通信和数据同步。系统通过智能算法优化行程,结合实时路况动态调整路线,提升用户体验。未来发展方向包括AI推荐、AR导航和多语言支持,进一步扩展系统的
428 4
基于高德MCP2.0的智能旅游攻略系统设计与实现
|
7月前
|
存储 算法 安全
搬运5个非常小众的实用软件
本文推荐5款小众但实用的软件:Vbook电子书管理,支持多格式解析与云端同步;AutoDarkMode智能切换系统主题,适配多种设备;燃精灵检测微信空号,助力精准营销;7-Zip高效压缩工具,采用LZMA2算法;Wondershare Recoverit数据修复专家,覆盖多种存储介质。每款软件都独具特色,满足不同需求。
212 1
|
存储 Python
使用 struct 模块打包/解包二进制数据
使用 struct 模块打包/解包二进制数据
326 2
|
9月前
|
人工智能 自然语言处理 搜索推荐
HiFox AI:一站式 AI 应用平台,多模型快速接入,自由选用
HiFox AI 是一站式AI应用平台,整合了30多个主流AI模型,提供文本生成、对话交流、图片生成等多种应用场景。平台内置1000+预构建AI应用,支持无代码搭建个性化应用和复杂工作流,帮助用户高效处理重复任务,显著提升工作效率。无论是普通用户还是技术专家,都能在HiFox AI上找到适合自己的解决方案,实现“人人都能使用AI”的愿景。
|
11月前
|
缓存 安全 数据挖掘
阿里云服务器目前活动中各实例规格适用场景汇总,选择指南参考
本文将基于2025年阿里云服务器相关活动的最新内容,对各个实例规格的适用场景进行详细汇总,并提供选择指南参考,帮助用户轻松选购到最适合自己的云服务器实例。
|
存储 数据处理 数据库
计算机中的单位详解
计算机中的单位详解
2288 0
|
SQL 机器学习/深度学习 存储
PostgreSQL逻辑备份pg_dump使用及其原理解析
PostgreSQL逻辑备份pg_dump使用及其原理解析
475 0