px

　　相对长度单位，像素px 是相对于显示器屏幕分辨率而言的。是我们网页设计常用的单位，也是基本单位。

通过 px 可以设置固定的布局或者元素大小，缺点是没有弹性。用 px 设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览 Web 页面时，如果改变了浏览器的缩放，这时会使得 Web 页面布局被打破。

em 

　　相对长度单位，相对于当前对象内文本的字体大小，相对于其父元素的 font-size 而计算的。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。也就是说，进行任何元素设置，都有可能需要知道他父元素的大小。

　　特点：1. em的值并不是固定的； 2. em会继承父级元素的字体大小。

　　注意：谷歌浏览器强制最小字体为 12px，即使设置成 10px 最终都会显示成 12px，当把 html 的 font-size 设置成 10px，子节点 rem 的计算还是以 12px 为基准。例如:

<body>

    <div class=”div1”>div1

        <div class=”div2”>

            div2

            <div class=”div3”>div3</div>

        </div>

    </div>

</body>

css：.div1 { font-size: 1.5rem; }，则计算关系为：

　　body 的 font-size 继承自根元素 html，即浏览器默认尺寸 16px，未经调整的浏览器都符合 1em = 16px，

　　div1 的 font-size = 1.5 * 16px = 24px

　　div2 的 font-size= 1.5 * 24px = 36px

　　如果设置 div2 的 font-size = 40px，则 div3 的 font-size = 1.5 * 40px = 60px

　　如果 div1 不定义基准大小，则下面 div2 将继承原本的默认值 1em = 16px，这样换算单位会很麻烦，但若每一个父级元素都设置基准大小，平白地增加了无穷的代码编辑烦恼。

　　为了简化 font-size 的换算，需要在 css 中的 body 选择器中声明 font-size = 62.5%，这就使 em 的值变为 16px * 62.5% = 10px，这样 12px = 1.2em，10px = 1em，也就是只需将原来的 px 数值除以10，然后换上 em 作为单位就行了。

注：在body里面注明 font-size: 62.5%;

　　1. 之后可以将 em 当 px 使用，然后 x10 就好，但前提是父级标签里面没设定 font-size；

　　2. 一旦父级元素有设定字体大小, em 前面数值 x 就相当于父级元素字体乘以 x%；

　　3. 相对最临近父级元素，且可以一直往下叠加。

大家可以查看这个弹性布局样例 The Incredible Em & Elastic Layouts with CSS  此时你使用浏览器的UI控件改变了文字的大小或者直接“ctrl + ”和“ctrl - ”，会发现这个弹性布局实例，在浏览器改变字体大小会做出相应的放大和缩小，并不会影响整个页面的布局。

总结：

　　* 浏览器的默认字体是 16px；

　　* 元素自身没有设置字体大小时，元素的width、height、line-height、margin、padding、border等值转换都按下面公式转换：1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值；

　　* 元素自身设置了字体大小后；

　　　　- 字体计算公式：1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值

　　　　- 其它属性的计算公式：1 ÷ 元素自身的 font-size × 需要转换的像素值 = em 值

rem

　　相对长度单位，r 是 roo 的缩写，相对于根元素 html 的字体大小，所以我们只需在根元素确定一个参考值即可。优点：只需要设置根目录的大小就可以把整个页面成比例的调好。但也绝不是每个地方都要用rem，rem只适用于固定尺寸。

　　例如设置 HTML 大小为 10px（ html { font-size: 62.5%; } /*10 ÷ 16 × 100% = 62.5%*/ 效果也一样），那么 1.2rem 就是 12px。

　　例如上面的 html 代码添加样式 div3 { font-size: 1.5rem; }，此时 div3 的 font-size = 1.5 * 16px = 1.5 * html 的 font-size

em 和 rem 的使用：

  • 如果这个属性根据它的font-size进行测量，则使用 em
  • 其他的属性均使用rem

另提供一个 px、em、rem 单位的转换工具：

　　http://pxtoem.com

%

　　相对于包含它的最近的父元素。对于普通元素就是我们理解的父元素；对于 position: absolute; 的元素是相对于已设定 position: relative; 的父元素；对于 position: fixed; 的元素是相对于 ViewPort（可视窗口）

　　%一般来说是相对于父元素来讲，但有特殊情况：

1、如果用来设置字体，相对的是父元素的字体大小，大多数浏览器中默认的字体尺寸是100%；

2、如果用来设置宽和高等非字体尺寸，则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。

vw、vh

　　css3新单位，view width 的简写，指相对于视口的高度和宽度。1vh = 1% 的视口高度。比如浏览器高度 900px，则 1vh = 900px * 1% = 9px。

　　实现与同屏幕等高的框，heigh: 100vh，在出现竖向滚动条的时候 vh = % + 滚动条的高度。

vm

　　 vmax and vmin 关于视口高度和宽度的最小/大值。如浏览器的宽度为1200px，高度为800px，1vmax = 1200 / 100px = 12px，vmin = 800 / 100px = 8px。

　　有一个元素需要让它始终在屏幕上可见：height: 100vmin; width: 100vmin；如果让这个元素始终铺满整个视口的可见区域：height: 100vmax; width: 100vmax。

以上这些单位在 CSS 布局使用中：

　　1. 盒子，图片等宽度设置首选百分比，次而选择 rem，高度可以是固定值；

　　2. 字体可以不用 rem，误差太大了，且不能满足任何屏幕下字体大小相同，所以建议标题类用 rem，要求字体大小相同的部分还是用 px；

　　3. 流布局、响应式布局等适配方式，rem 适配更为灵活，在不同屏幕尺寸上根据根节点来等比适配；

CSS中的单位px、em、rem、%、vw、vh、vm的更多相关文章

  1. css中px em rem vw vh vmax vmin等单位的区别--转载

    px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...

  2. css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

    长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  3. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

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

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

  5. css中的单位px，em和rem的区别

    一.px: px就是像素,用px设置字体大小的时候会比较精确,但是有时候我们会使用不同屏幕尺寸去浏览网页.当页面相应的扩大或者缩小的时候,页面的字体大小就会出现过小或者过大.由于这种问题,就提出了使用 ...

  6. 关于CSS中的单位px、em、rem

    首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...

  7. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  8. px,em,rem,vw单位在网页和移动端的应用

    px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...

  9. 搞清css的单位 px,em,rem的区别

    前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...

随机推荐

  1. Python之socket_udp

    UDP服务端&客户端编程 ''' udp编程 创建socket对象,socket.SOCK_DGRAM 绑定ip和port,bind()方法 传输数据 1.接收数据,socket.recvfr ...

  2. 20175208 《Java程序设计》第六周学习总结

    20175208 <Java程序设计>第六周学习总结 一.教材知识点总结: 第七章 1.内部类: 成员内部类.静态嵌套类.方法内部类.匿名内部类 .(1).内部类仍然是一个独立的类,在编译 ...

  3. Class打包成jar

    Class打包成jar 现在我的文件夹的目录在: C:\Users\linsenq\Desktop\cglibjar 我要把位于这个目录下的所有文件夹以及这个文件夹下的.class文件打成jar包 第 ...

  4. Thanks David's Share

    2019.4.12 Today, we got the invitation letter from US, when we discuss the journey, i saw perfect sh ...

  5. iOS进阶之如何进行 HTTP Mock（转载）

    这篇文章会对 OHHTTPStubs 源代码的分析,其实现原理是建立在 NSURLProtocol 的基础上的,对这部分内容不了解的读者,可以阅读这篇文章 iOS 开发中使用 NSURLProtoco ...

  6. MacOS修改用户名后变为普通用户，无法创建管理员账号

    摘要:有的时候用户修改原电脑用户名,会把该用户降为普通用户,点击下方的锁会弹出下方图示,导致无法修改任何设置 解决方案: 重启电脑Restart按Command+S进入终端terminal输入以下命令 ...

  7. Parallels Desktop 14.1.3中文版win系统安装教程

    parallels desktop 14 中文版(pd虚拟机)是mac上最强大也是最好用的虚拟机软件,本站第一时间为大家带来这款parallels desktop 14 破解版,最新版本的parall ...

  8. dataguard主库删除归档日志后从库恢复的方法

    ------------------方法1在主库上使用备份的进行恢复丢失的归档日志-------------------------1.发现主库备份后删除了归档,但是这些归档从库还没应用,也没有传到从 ...

  9. markdown code test - markdown code test - markdown code test - markdown code test

    目录 主要代码 bottom cc 主要代码 <div class="tocCol1 js-toc"></div> <a>bc</a> ...

  10. [c/c++] programming之路（27）、union共用体

    共用体时刻只有一个变量,结构体变量同时并存 一.创建共用体的三种形式 #include<stdio.h> #include<stdlib.h> #include<stri ...