css 单位px、em、rem、vh、vw、vmin、vmax区别

时间:2022-04-08 01:53:10

1、px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2、em:相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 
看下面例子: 
HTML:

<body>body
<div class="div1">div1
<div class="div2">div2
<div class="div3">div3</div>
</div>
</div>
</body>

css:

div{
font-size:1.5em;
}

效果:css 单位px、em、rem、vh、vw、vmin、vmax区别

计算关系如下:

计算关系是这样的:

body的font-size是继承自跟元素html,html的尺寸是浏览器默认尺寸14px;
div1的font-size=1.5*14px = 21px;
div2的font-size=1.5*21px = 31.5px;
div3的font-size=1.5*31.5px = 47.25px;

3、rem:相对长度单位。r’是“root”的缩写,相对于根元素<html>的字体大小。

例如还是上面的html代码,添加如下样式:

.div3{
font-size:1.5rem;
}

此时效果:css 单位px、em、rem、vh、vw、vmin、vmax区别

4、vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。

1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

比如:浏览器高度900px,宽度为750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px。

很容易实现与同屏幕等高的框:.slide { height: 100vh;} 
设置一个和屏幕同宽的标题,h1{font-size:100vw},那标题的字体大小就会自动根据浏览器的宽度进行缩放,以达到字体和viewport大小同步的效果。

5、vmin and vmax:关于视口高度和宽度两者的最小值或者最大值。

比如,浏览器的宽度设置为1200px,高度设置为800px, 1vmax = 1200/100px = 12px, 1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则未10.8px。

一下两种代码区别如图:

.box {
height: 100vmin;
width: 100vmin;
}
.box {
height: 100vmax;
width: 100vmax;
}

css 单位px、em、rem、vh、vw、vmin、vmax区别

css 单位px、em、rem、vh、vw、vmin、vmax区别

原文链接:http://blog.csdn.net/javaloveiphone/article/details/51120476。

css 单位px、em、rem、vh、vw、vmin、vmax区别的更多相关文章

  1. css3中单位px&comma;em&comma;rem&comma;vh&comma;vw&comma;vmin&comma;vmax的区别及浏览器支持情况

    原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...

  2. 理解并使用CSS3中的单位rem vh vw vmin vmax

    rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...

  3. css单位px&comma;em&comma;rem区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  4. 7个你可能不认识的CSS单位&colon;rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...

  5. 关于CSS单位&colon;rem vh vw vmin vmax

    rem(root em) 如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size demo: body {  font-size: ...

  6. CSS3中的px&comma;em&comma;rem&comma;vh&comma;vw辨析

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...

  7. CSS3中的px&comma;em&comma;rem&comma;vh&comma;vw

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www. ...

  8. css 单位 px em rem

    http://www.cnblogs.com/leejersey/p/3662612.html

  9. rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设 ...

  10. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

随机推荐

  1. android---shape&period;xml属性

    solid:填充android:color指定填充的颜色 gradient:渐变android:startColor和android:endColor分别为起始和结束颜色, 另外渐变默认的模式为and ...

  2. mysql 数据表中查找、删除重复记录

    为了性能考虑,在阅读之前提醒大家,如果有子查询,子查询查询到的数据最好不要超过总数据量的30%. 查询有重复数据的记录 select * from F group by a,b,c,d having ...

  3. 如何使用Instruments诊断App(Swift版):起步-b

    无论你写过许多iOS应用,还是刚刚开始你的第一个应用,毫无疑问,你都会想出一些新点子,或者想去弄明白你该怎么做,来让你的app变得更好. 除去添加新特性来优化你的应用,有一件事是所有好的开发者都回去做 ...

  4. 积累的VC编程小技巧之滚动条

    1.设置滚动条的滚动大小 创建一个基于CScrollview的SDI Project(在第6步中选CScrollview) 若你已创建了,这步可以省略. 然后: 改为如 void CTestView: ...

  5. Delphi ADO数据操作封装类

    [delphi] view plaincopyprint? { 将数据集操作方面的东西全部封装成一个单独的类 TcustomAdoDataSet是TadoQuery.TadoTable.TadoDat ...

  6. spring mvc 资源包的映射

    在springmvc.xml中进行设置: <?xml version="1.0" encoding="UTF-8"?> <beans xmln ...

  7. Angular--学习

    18:28:34 Angular简介 AngularJS通过指令 扩展了HTML,并通过 表达式 绑定数据到HTML Angular扩展了HTML AngularJS 通过 ng-directives ...

  8. &lbrack;Python&rsqb; 糗事百科文本数据的抓取

    [Python] 糗事百科文本数据的抓取 源码 https://github.com/YouXianMing/QiuShiBaiKeText import sqlite3 import time im ...

  9. &quot&semi;Regressing Robust and Discriminative 3D Morphable Models with a very Deep Neural Network&quot&semi; 解读

    简介:这是一篇17年的CVPR,作者提出使用现有的人脸识别深度神经网络Resnet101来得到一个具有鲁棒性的人脸模型. 原文链接:https://www.researchgate.net/publi ...

  10. js缓存加密

    1.访问A链接就以A链接的特定部分为密码盐,生成一个js跳转配置文件名 aojoweiojoiwjeiof2.PHP在生成js跳转文件名的时候,也是根据数据库中的跳转起始链接特定部分作为盐,生成的文件 ...