css 单位px、em、rem、vh、vw、vmin、vmax区别
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;
}
效果：
计算关系如下：
计算关系是这样的：
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;
}
此时效果：
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;
}
原文链接：http://blog.csdn.net/javaloveiphone/article/details/51120476。
css 单位px、em、rem、vh、vw、vmin、vmax区别的更多相关文章
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...
- 理解并使用CSS3中的单位rem vh vw vmin vmax
rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...
- css单位px,em,rem区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...
- 关于CSS单位:rem vh vw vmin vmax
rem(root em) 如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size demo: body { font-size: ...
- CSS3中的px,em,rem,vh,vw辨析
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...
- CSS3中的px,em,rem,vh,vw
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www. ...
- css 单位 px em rem
http://www.cnblogs.com/leejersey/p/3662612.html
- rem vh vw vmin vmax ex ch
rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设 ...
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
随机推荐
- 设置win版vim启动项[利刃篇]
vim默认启动设置有时不太好,想改一下,但是又不像windows其他软件那样,界面设置后就生效,这里需要手动设置文件才可以,那就赶紧设置一下吧! 修改文件为 vim安装目录/_vimrc 文件,或者在 ...
- kubernetes集群搭建（7）：常见问题及处理
尤其在创建pod的时候,会遇见各类问题,请通过下列命令来查看错误详情 kubectl describe pod xxxxxx 1.问题现象:镜像始终获取不下来 解决办法:为docker设置镜像源 [r ...
- mysql升级8.0后项目不能连接问题
转载简书:https://www.jianshu.com/p/a164d582e5d9 主要是因为驱动配置变了driver中得用com.mysql.cj.jdbc.Driver,多了个cj: url后 ...
- PHP画矩形，椭圆，圆，画椭圆弧 ，饼状图
1:画矩形: imagerectangle ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $col ) imagere ...
- LeetCode手记-Add Binary
问题描述 问题分析 分析题意,此题实际是求解两个二进制数的和,但是有两点要注意: 1.字符串的长度不限,所以相应十进制数值很可能会超过int的上限. 2.二进制的加法规则是自右向左进位,需要注意,以题 ...
- 微信开发之获取openid及推送模板消息
有很多的朋友再问我怎么获取code,openid之类的问题,在这里我就给大家分享一下. 在做微信支付是需要获取openid的,推送模板消息也是需要openid包括其他一些功能分享等也都是需要的,ope ...
- web自动化测试---测试环境的部署
当前我的测试环境配置如下: python3.6 下载地址: https://www.python.org/downloads/release/python-365/ 选择windows版本,下载完成后 ...
- python lxml库生成xml文件-节点命名空间问题
lxml库,处理xml很强大,官方文档:https://lxml.de/tutorial.html#namespaces 例如: 我们要生成如下格式的报文: <ttt:jesson xmlns: ...
- SignalR 中使用 MessagePack 序列化提高 WebSocket 通信性能
It's like JSON.but fast and small. MessagePack is an efficient binary serialization format. It lets ...
- 这是一位拿到BAT大厂offer应届生的年终总结，那么你的呢？
壹 关于求职 2018年初,我还在北京后厂村的马路上被风吹得瑟瑟发抖. 那时我刚刚结束了半年的实习时光,开始考虑年后是否要继续实习.一开始我也在纠结实习转正和秋招之间如何权衡,但是在经历了春招以后,我 ...