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实现 洛谷 P2141 珠心算测验

    import java.util.LinkedList; import java.util.Scanner; public class Main { private static Scanner ci ...

  2. Java实现第九届蓝桥杯小朋友崇拜圈

    小朋友崇拜圈 题目描述 班里N个小朋友,每个人都有自己最崇拜的一个小朋友(也可以是自己). 在一个游戏中,需要小朋友坐一个圈, 每个小朋友都有自己最崇拜的小朋友在他的右手边. 求满足条件的圈最大多少人 ...

  3. 一个Jmeter模拟上传文件接口的实例

    资料参考:https://blog.csdn.net/u010390063/article/details/78329373 项目中,避免不了要用到很多上传文件.图片的接口,那么碰到这类接口该如何进行 ...

  4. 全面概述Gitee和GitHub生成/添加SSH公钥

    前言 现如今将代码开源已经成为软件开发行业的一种趋势,而现在比较有名的代码托管平台有GItHub.Gitee.Gitlab等相关平台.而我们在使用代码托管平台最为常见的就是如何将自己本地的代码推送到远 ...

  5. Andorid中写文件后在电脑上看不到的解决办法

    每次通过输出流往SD卡写入文件,连接上电脑,用MTP的方式模拟一个移动磁盘,打开磁盘却没有这样一个文件,而通过adb的方式查看就有,造成这个现象的原因是,每次写入之后,MTP的数据库并没有更新,因为更 ...

  6. 链式前向星存树图和遍历它的两种方法【dfs、bfs】

    目录 一.链式前向星存图 二.两种遍历方法 一.链式前向星存图:(n个点,n-1条边) 链式前向星把上面的树图存下来,输入: 9 ///代表要存进去n个点 1 2 ///下面是n-1条边,每条边连接两 ...

  7. 最全面的SourceTree账号注册教程

    前言: 作为一个国内开发者而言使用Git操作神器SoureTree最大的问题就是账号注册问题,因为注册账号的链接在不翻墙的情况下基本上是打不开的(弄过的童鞋应该都体会过),所以有的时候我们需要借助一些 ...

  8. 2019-01-31 Python学习之BFS与DFS实现爬取邮箱

    今天学习了python网络爬虫的简单知识 首先是一个爬取百度的按行读取和一次性爬取 逐行爬取 for line in urllib.request.urlopen("http://www.b ...

  9. LR脚本信息函数-lr_get_host_name

    lr_get_host_name() 返回主机的名称. char * lr_get_host_name(); lr_get_host_name函数返回执行脚本的机器的名称. 示例:lr_get_hos ...

  10. JMeter+Grafana+Influxdb搭建可视化性能测试监控平台（使用了docker）

    [运行自定义镜像搭建监控平台] 继上一篇的帖子 ,上一篇已经展示了如何自定义docker镜像,大家操作就行 或者 用我已经自定义好了的镜像,直接pull就行 下面我简单介绍pull下来后如何使用 拉取 ...