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能 ...
随机推荐
- spring redis @Cacheable注解使用部分错误及无效原因
spring redis @Cacheable注解使用部分错误及无效原因 说明: spring项目用到redis注解无效,解决问题中遇到一堆BUG,各种搜索,看了许多错误解决方案一一测试,对于 ...
- commons-text StrBuilder字符串构建工具类例子
package com.skylink.junge.demo; import java.util.ArrayList; import java.util.List; import org.apache ...
- 为什么需要micro-service构建平台
最近一直在做micro-service的开发平台建设.由于这是一个实验项目,目前所有工作都得靠自己操刀. 今天在总结用python开发一个web service时,偶有所得,这让我建设micro-se ...
- python循环语句详细讲解
想必大家都知道python循环语句吧,可以python循环语句有多种,比如for循环.while循环.if.else等等, 我们可以通过设置条件表达式永远不为 false 来实现无限循环,实例如下 ...
- harbor镜像仓库-02-https访问配置
harbor镜像仓库-02-https访问配置 harbordockerhttps harbor搭建部署参考上一章节 harbor镜像仓库-01-搭建部署 Harbor默认使用http,给harbor ...
- Ajax 的学习
(一)基础知识和新的概念 1,AJAX 就是浏览器提供的一套 API,可以通过 JavaScript 调用,从而实现通过代码控制请求与响应.实现 网络编程. 2,AJAX(Asynchr ...
- css选择符权重
css选择符权重 目录 css选择符权重 css选择器权重列表 CSS选择符冲突处理 css选择符权重 css选择器权重列表 选择器 权重 内联样式 1000 ID 0100 CLASS 0010 属 ...
- spring cloud（服务消费者（利用feign实现服务消费及负载均衡）——初学三）
Feign是一个声明式的Web Service客户端,我们只需要使用Feign来创建一个接口并用注解来配置它既可完成. 它具备可插拔的注解支持,包括Feign注解和JAX-RS注解.Feign也支持可 ...
- Java读取Properties的几种方法
本文转载自:http://blog.csdn.net/chjttony/article/details/5927613 每次用完每次忘相对与绝对...
- WinForm版图像编辑小程序（实现图像拖动、缩放、旋转、抠图）
闲暇之余,开发一个图片编辑小程序.程序主要特点就是可方便的对多个图像编辑,实现了一些基本的操作.本文主要介绍一下程序的功能.设计思路. 执行程序 下载地址: 百度网盘.https://pan.baid ...