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区别的更多相关文章

  1. css3中单位px,em,rem,vh,vw,vmin,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,em,rem区别

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

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

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

  5. 关于CSS单位:rem vh vw vmin vmax

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

  6. CSS3中的px,em,rem,vh,vw辨析

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

  7. CSS3中的px,em,rem,vh,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. 美团codeM预赛A轮 倒水

    [编程题] 倒水 时间限制:1秒 空间限制:32768K 有一个大水缸,里面水的温度为T单位,体积为C升.另有n杯水(假设每个杯子的容量是无限的),每杯水的温度为t[i]单位,体积为c[i]升. 现在 ...

  2. Spring Boot Actuator 使用

    转载于:https://www.jianshu.com/p/af9738634a21 Spring Boot 的 Actuator 提供了很多生产级的特性,比如监控和度量Spring Boot 应用程 ...

  3. wampserver 的默认首页设置

    # wampserver 首页顺序设置 <IfModule dir_module> DirectoryIndex index.php default.php index.html inde ...

  4. Dispatch Queue 之 Invoke 当前队列

    

  5. ubuntu下TFTP Server 的安装和使用方法

    tftp是一种于1981年在RFC 783中定义的简化的文件传输协议(FTP).小型文件传输协议非常简单,通过少量存储器就能轻松实现 ——这在当时是很重要的考虑因素.所以TFTP被用于引导计算机,例如 ...

  6. OC学习5——类和对象

    1.OC是在C语言基础上进行扩展得到的一门面向对象的程序设计语言,它也提供了定义类.成员变量和方法的基本功能.类可以被认为是一种自定义的数据类型,使用它可以定义变量,所有使用类定义的变量都是指针类型的 ...

  7. ArrayList源码解读笔记

    简介: ArrayList是我们开发中非常常用的数据存储容器之一,其底层是数组实现的,我们可以在集合中存储任意类型的数据,ArrayList是线程不安全的,非常适合用于对元素进行查找,效率非常高. 线 ...

  8. jvm-class文件简介

    jvm全称 java virtual machine (java虚拟机),也就是在计算机上再虚拟一个计算机,它存在于计算机内存中并运行在操作系统之上的. javap -v class文件名 > ...

  9. mint-ui Infinite scroll 重复加载、加载无效的原因及解决方案

    1.无限滚动的运用场景: 一般运用在列表展示,有分页.下拉加载更多的需求中. 2.代码分析 代码很简单,实现了列表分页,数据加载完之后显示数据状态 <template> <div c ...

  10. Android应用内展示office文件--腾讯浏览服务（TBS）

    什么是TBS  依托 X5 内核强大的能力,致力于提供优化移动端浏览体验的整套解决方案(官网介绍).我们可利用其做文件浏览功能,支持多种文件格式,完全可以满足需求.更多介绍请看官网:http://x5 ...