说说em/px/rem/vh/vw的区别
一、介绍
传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性
从CSS3开始,浏览器对计量单位的支持又提升到了另外一个境界,新增了rem、vh、vw、vm等一些新的计量单位
利用这些新的单位开发出比较良好的响应式页面,适应多种不同分辨率的终端,包括移动设备等
二、单位
在css单位中,可以分为长度单位、绝对单位,如下表所指示
CSS单位
相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位 cm、mm、in、px、pt、pc
这里我们主要讲述px、em、rem、vh、vw
px
px,表示像素,所谓像素就是呈现在我们显示器上的一个个小点,每个像素点都是大小等同的,所以像素为计量单位被分在了绝对长度单位中
有些人会把px认为是相对长度,原因在于在移动端中存在设备像素比,px实际显示的大小是不确定的
这里之所以认为px为绝对单位,在于px的大小和元素的其他属性无关
em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(1em = 16px)
为了简化 font-size 的换算,我们需要在css中的 body 选择器中声明font-size= 62.5%,这就使 em 值变为 16px*62.5% = 10px
这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10,然后换上 em作为单位就行了
特点:
em 的值并不是固定的
em 会继承父级元素的字体大小
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸
任意浏览器的默认字体高都是 16px
举个例子
<style>html {font-size: 10px; } /* 公式16px*62.5%=10px */ .big{font-size: 1.4rem}.small{font-size: 1.2rem}
</style>
这时候.big元素的font-size为14px,而.small元素的font-size为12px
rem
rem,相对单位,相对的只是HTML根元素font-size的值
同理,如果想要简化font-size的转化,我们可以在根元素html中加入font-size: 62.5%
html {font-size: 62.5%; } /* 公式16px*62.5%=10px */
这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助
特点:
rem单位可谓集相对大小和绝对大小的优点于一身
和em不同的是rem总是相对于根元素,而不像em一样使用级联的方式来计算尺寸
vh、vw
vw ,就是根据窗口的宽度,分成100等份,100vw就表示满宽,50vw就表示一半宽。(vw 始终是针对窗口的宽),同理,vh则为窗口的高度
这里的窗口分成几种情况:
在桌面端,指的是浏览器的可视区域
移动端指的就是布局视口
像vw、vh,比较容易混淆的一个单位是%,不过百分比宽泛的讲是相对于父元素:
对于普通定位元素就是我们理解的父元素
对于position: absolute;的元素是相对于已定位的父元素
对于position: fixed;的元素是相对于 ViewPort(可视窗口)
三、总结
「px」:绝对单位,页面按精确像素展示
「em」:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值
「rem」:相对单位,可理解为root em, 相对根节点html的字体大小来计算
「vh、vw」:主要用于页面视口大小布局,在页面布局上更加方便简单
说说em/px/rem/vh/vw的区别相关推荐
- 7、em/px/rem/vh/vw区别?
简介 em/px/rem/vh/vw都属于css的单位,这些单位可以分为相对单位,绝对单位 px:绝对单位,网页按照精确像素来显示 em:相对单位,相对自身定义的font-size来计算,自身没有设置 ...
- px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
- px、rpx、em、rem、vw、vh各种像素单位的区别
px.rpx.em.rem.vw.vh各种像素单位的区别 px:px就是 pixel的缩写,意味像素.px就是一张图片最小的一个点,一张位图就是无数个这样的点构成的,是web开发中最常用的像素单位. ...
- html pc vw过大,细说em/rem/vh/vw与响应式布局
细说em/rem/vh/vw与响应式布局 一.em,rem的原理与应用场景 CSS单位中的长度单位分为:相对长度.绝对长度,如下表: 引用MDN上的两句话: em:在 font-size 中使用是相对 ...
- html中1em等于多少像素,CSS:度量单位(px,em,rem,vw,%等)
CSS:度量单位(px,em,rem,vw,%等) 2020-3-31 1584 0 Photo by Charles Deluvio on Unsplash 介绍 我决定写这个博客的目的是希望探索更 ...
- CSS尺寸单位px、em、rem、vw、vh以及%的区别
1. px px是像素单位.它是代表显示器上每一个显示的像素点,根据用户屏幕显示器的分辨率决定. 2. em em为相对单位,相对于当前元素内文本的字体尺寸.如果当前元素没有指定字体尺寸,那么以浏览器 ...
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
- vue中px 转 vh/vw
安装插件 npm install postcss-px-to-viewport --save -dev (直接在vscode 中安装插件 px to rem & rpx & vw (c ...
- px、em、rem、vw、vh、vmax、vmin的区别
px是绝对单位还是相对单位 ? 按照 CSS 规范的定义,CSS 中的 px 是一个相对长度,它相对的,通常就是电脑显示器.通常电脑显示器的分辨率是96DPI,也就是1像素为1/96英寸 一般来说,p ...
最新文章
- java的函数传值_java 函数形参传值和传引用的区别[转]
- 树莓派python实例_使用Python实现树莓派WiFi断线自动重连实例(附代码)
- Linux系统下的DDOS***防范
- SAP Backgroud job
- xp系统 javafx_使用JavaFX构建React系统
- c防止随机数重复_铝及铝模板等焊接常见缺陷、和防止措施12招
- Hive 修复分区 msck repair table
- css强制一行显示超出的部分显示点点点
- 【盛天体育出品】天津仁爱学院“彩虹”运动场来了
- win10防火墙删除的文件在哪里_【微软】第42期分享:微软 Win10 仍存在删除个人配置文件数据 Bug!...
- 结构体、共用体、位操作和枚举类型
- MyBatis读数据库出现很多字段都是null的问题
- 内核spinlock raw_spin_lock spin_lock_bh
- vscode的下载与安装教程
- 【解决方案】文化体育场馆如何搭建远程网络视频监控,防范突发人流拥挤踩踏事件?
- 养老服务机构引入电子签章推动养老合同在线签
- R沟通|Typora字体颜色设置
- 互联网时代,人类再无隐私
- Oracle VM VirtualBox安装Win10系统
- 洛谷 P2534 [AHOI2012]铁盘整理(IDA*(dfs+迭代加深+估值函数))