认识css长度单位 px % em rem vh vw
目录
- 长度单位
- px
- %
- em
- rem
- vh、vw
- 总结
长度单位
在日常的项目开发，在使用css样式进行时布局的时候，我们常常用到px、%、em这三个单位。CSS3开始，浏览器新增加了rem、vh、vw、vm等一些新的计量单位。利用这些新的计量单位能够开发出比较好的响应式页面，更大限度适应各种分辨率的终端，包括移动设备、触摸大屏等等。
| 单位 | Value |
|---|---|
| 相对长度单位 | em、ex、ch、rem、vw、vh、vmin、vmax、% |
| 绝对长度单位 | cm、mm、in、px、pt、pc |
长度单位众多，讲述px、%、em、rem、vh、vw这几个常用的。
px
px是绝对长度。表示像素，就是在我们显示器上呈现的一个一个的小点，每个像素点的大小都是等同。
可能其他人会把它归为相对长度的行列，因为移动端存在像素比dpr(devicePixelRatio)，devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。可以看下图当dpr为2。即设置1px时在iphone6中显示2px
%
%是相对长度，相对于包含块（containing block）的高宽或字体大小。
关于包含块（containing block）的概念，不能简单地理解成是父元素。
- 如果是静态定位和相对定位，包含块一般就是其父元素。
- 如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。
- 如果是固定定位的元素，它的包含块是视口（viewport）。
em
em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px），此Web页面中的body就继承了这个“font-size:16px;”，除非你在CSS样式中显式的设置body的“font-size”值，来改变其继承的值。例如在body的选择器中设置font-size= 62.5% ，10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位就行了
特点：
- em 的值并不是固定的
- em 会继承父级元素的字体大小
- em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
- 任意浏览器的默认字体高都是 16px
rem
rem是相对单位，相对的只是html根元素font-size的值，默认16px = 1rem，想要改变rem的值，只要在html的选择器中设置font-size的值。
html {font-size: 50px
}
//现在的 1rem = 50px
特点：
- rem单位可谓集相对大小和绝对大小的优点于一身
- 和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸
vh、vw
vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度
这里的窗口分成几种情况：
在桌面端，指的是浏览器的可视区域
移动端指的就是布局视口
像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：
- 对于普通定位元素就是我们理解的父元素
- 对于position: absolute;的元素是相对于已定位的父元素
- 对于position: fixed;的元素是相对于 ViewPort（可视窗口）
总结
「px」：绝对单位，页面按精确像素展示
「%」：相对单位，相对于包含块（containing block）的高宽或字体大小
「em」：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值
「rem」：相对单位，可理解为root em, 相对根节点html的字体大小来计算
「vh、vw」：主要用于页面视口大小布局，在页面布局上更加方便简单
认识css长度单位 px % em rem vh vw相关推荐
- px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- html pc vw过大,细说em/rem/vh/vw与响应式布局
细说em/rem/vh/vw与响应式布局 一.em,rem的原理与应用场景 CSS单位中的长度单位分为:相对长度.绝对长度,如下表: 引用MDN上的两句话: em:在 font-size 中使用是相对 ...
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- Css单位px，rem，em，vw，vh的区别
Css单位px,rem,em,vw,vh的区别 px 像素 rem 根元素字体大小 应用场景 使用和修改 em 相对于父元素的大小 % 相对长度单位 vw.vh 相对于视口的单位 视口 VW 相对于视 ...
- 7、em/px/rem/vh/vw区别？
简介 em/px/rem/vh/vw都属于css的单位,这些单位可以分为相对单位,绝对单位 px:绝对单位,网页按照精确像素来显示 em:相对单位,相对自身定义的font-size来计算,自身没有设置 ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- html移动端怎么做城市选择,移动端页面单位的选择（px, em, rem, vw）
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
最新文章
- css3效果： animate实现点点点loading动画效果（一）
- 成功解决ValueError: Invalid format string
- [LeetCode][JavaScript]Roman to Integer
- servlet中文乱码处理
- 自定义ActionBar、Toolbar布局（解决自定义ActionBar布局左边始终有一点边距的问题）
- debugger怎么用_谷歌开发者工具，这些技巧你用过么？
- SAP License：EXCEL自定义函数 For SAP遗留资产折旧计算
- nyoj37回文字符串
- Arcgis(一) 制作全国行政区shp文件(精确到县级)
- 园区IP地址规划（非常详细）
- matlab时域采样理论得验证,基于matlab时域采样和频域采样验证毕业设计
- PyTorch搭建Transformer实现多变量多步长时间序列预测（负荷预测）
- 程序员福利：当编程语言都变成女孩子
- 电子元件知识汇总3-厂商
- 3D打印牛排，入口即化！你敢吃吗？
- 使用QT5书写的护眼程序
- 计算机win7安装打印机,win7如何安装打印机驱动程序 win7系统安装打印机的方法...
- Python 淘宝系列(三)： 模拟登陆成功后获取购物车信息
- fpu测试_仪器仪表 —— 一氧化碳测试仪
- 统计源期刊《国际医学放射学杂志》