rem vh vw vmin vmax做为CSS3中的新单位，其实都出来挺久的了，这篇文章将总结并理解下它们。

rem

如果你给body设置了font-size字体大小，那么body的任何子元素的1em就是等于body设置的font-size

body {  font-size: 14px; }

div {  font-size: .2rem; // calculated at 14px * 1.2, or 16.8px}

em

从它上一级父元素继承了字体大小，并且逐渐得增加。

<body>

       <div class=”div1”>

              <div class=”div2”>

                     <div class=”div3”>

               </div>

        </div>

</div>

</body>

<style>

body{ font-size：14px; }

div1{font-size:.2em};//1.2*14PX

div2{font-size:.2em}//1.2*1.2*14px

div3{font-size:.2em}//1.2*1.2*1.2*14px

</style>

vh 和 vw

vw：视窗宽度的百分比 
 vh：视窗高度的百分比

视窗，指的是浏览器可视区域的宽高，也就是window.innerWidth/window.innerHeight。1vw就是1%的浏览器的宽度。100vw就是整个视窗的宽度。

.demo{//一行css实现同屏幕等高，等宽

  height: 100vh;

  width:100wh;

}

办公资源网址导航 https://www.wode007.com

vmin 和 vmax

vmin：当前较小的vw和vh 
 vmax：当前较大的vw和vh

vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值 浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 7px， 1vmax = 11px。 如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px

总结：

对CSS的单位的使用了解是非常重要的，也许你会遇到一个问题可以通过css的这些单位得到解决，同时对于rem,vh和vw,百分比等都是我们做自适应网站常用的方法。

理解并使用CSS3中的单位rem vh vw vmin vmax的更多相关文章

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

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

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

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

  3. css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

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

  4. rem vh vw vmin vmax ex ch

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

  5. [css] CSS3中的单位

    FROM http://www.qianduan.net/understand-the-unit-of-length-in-the-css.html CSS3中的单位: css3中引入了一些新的单位: ...

  6. 尺寸单位em,rem,vh,vw

    这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...

  7. 移动端css单位之 “vh” & “vw”

    一.前言: 响应式web设计离不开百分比.但是,CSS百分比并不是所有的问题的最佳解决方案.CSS的宽度是相对于包含它的最近的父元素的宽度的.但是如果你就想用视口(viewpoint)的宽度或者高度, ...

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

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

  9. CSS3中的字体rem

    rem和em都是相对单位,em相对父元素的font-size来计算,而rem是根据文档根元素(html)的font-size大小来计算的 通常将html的字体大小设为62.5%(等于10px),当然也 ...

随机推荐

  1. Java 是如何实现跨平台的？

    Java 是如何实现跨平台的? 注意:跨平台的是 Java 程序,而不是 JVM.JVM 是用 C/C++ 开发的,是编译后的机器码,不能跨平台,不同平台下需要安装不同版本的 JVM 答:我们编写的 ...

  2. 05.Django-form表单与请求的生命周期

    Django中请求的生命周期 HTTP请求及服务端响应中传输的所有数据都是字符串 步骤 用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务器 url经过wsgi和中间件,到达路由映射表,在 ...

  3. 使用vw进行移动端适配（nuxt项目）

    基于nuxt 2.0.0 一.安装postcss-px-to-viewport npm安装 npm install postcss-px-to-viewport --save-dev 或 yarn安装 ...

  4. jquery 手写一个简单浮窗的反面教材

    前言 初学jquery写的代码,陈年往事回忆一下. 正文 介绍一下大体思路 思路: 1.需要控制一块区域,这块区域一开始是隐藏的. 2.这个区域需要关闭按钮,同时我需要写绑定事件,关闭的时候让这块区域 ...

  5. Random Point in Triangle【随机数解决期望值问题】

    Random Point in Triangle 题目链接(点击) 题目描述 Bobo has a triangle ABC with A(x1,y1),B(x2,y2)A(x1,y1),B(x2,y ...

  6. 2019-02-05 Linux的一些常用命令学习2

    黑马程序员python课的笔记 ls -l 显示文件详细信息 ls -l -h 以k形式显示大小 ls -a 显示指定目录下的所有子目录和文件,包括隐藏文件 ls匹配符 *代表任意个数的字符 ?代表任 ...

  7. bug的描述

    我们知道了自身的症状,那么就从这里开始,一起聊一聊一个优秀的 BUG,应该包含哪些方面的内容呢? 标题 其实每一个 BUG 也都是一个小的文档,既然是文档,我们首先就要做好一个 “标题党”,当然,此 ...

  8. python学习日记2019.9.2

    1 定义一个字符串对象str str.title() #将字符串中用空格分隔的字符段首字母大写 str.rstrip() #将字符串末的空格删去 str.strip() #将字符串首末的空格删去 st ...

  9. Java基本数据类型和包装类

    一:八大基本类型 二:基本数据类型及包装类 三:基本类型和包装类的区别 1:定义不同.封装类是对象:基本类型不是. 2:使用方式不同.包装类需要先new初始化,再通过JVM根据具体情况实例化后赋值:基 ...

  10. java并发——copyonwrite

    今天在网上看到一个问题,问除了加锁之外,有没有其他方法来保证线程安全? ---- copyonwrite机制 一.copyonwrite机制 机制实现:写时复制, 在往集合中添加数据的时候,先拷贝存储 ...