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. SSH的软链接后门

    之前说过为了防止SSH的后面漏洞 , 升级到高版本的OpenSSH , 那也不能保证万无一失 经典后门  直接对sshd建立软连接 , 之后用任意密码登录即可 看下面操作 创建完软连接后  创建新的会 ...

  2. node获取当前路径的三种方法

    node提供了3种获取路径的方法  ,在当前目录下,运行node const {resolve} = require('path') console.log('__dirname : ' + __di ...

  3. 微信小程序将网络图片转化为base64

    网络图片需用wx.downloadFile下载,然后调用微信自带的base64转化 可能会存在兼容, let image_to_base64 = function(img){ return new P ...

  4. centos7多网卡配置bond0 （mode6无需交换机做配置）

    1.执行setup命令-->网络配置-->本例中四块网卡. 2.ifconfig列出四块网卡. 3.我们的目标,绑定eth0和eth1两块网卡作为公网网卡,ip设置为192.168.0.5 ...

  5. java线程学习之yield方法

    yield方法是暂停当前正在执行的线程对象,并执行其他线程. 这是一个静态方法,一旦执行,它会使当前线程让出CPU.让出的cpu并不代表当前线程不执行了.当前线程让出CPU后,还会CPU资源的争夺,但 ...

  6. json键和值转数组

    var jb={"美的":49,"三星":35,"海信":25,"格力":16,"方太":14}; ...

  7. PHP 农历公历互转,八字排盘,星座,日历,支持从-1000到3000年间的排盘,二十四节气

    <?php /** * @author szargv@wo.cn * * 此日历转换类完全源于以下项目,感谢这两个项目作者的无私分享: * https://github.com/nozomi19 ...

  8. P4174 [NOI2006]最大获利（网络流）

    P4174 [NOI2006]最大获利 还是最大权闭合子图的题 对于每个中转站$k$:$link(k,T,P_k)$ 对于每个用户$i$.中转站$A_i,B_i$.贡献$C_i$ $link(S,i, ...

  9. PHP遍历二叉树

    遍历二叉树,这个相对比较复杂. 二叉树的便利,主要有两种,一种是广度优先遍历,一种是深度优先遍历. 什么是广度优先遍历?就是根节点进入,水平一行一行的便利. 什么是深度优先遍历呢?就是根节点进入,然后 ...

  10. 使用go-template自定义kubectl get输出

    kubectl get相关资源,默认输出为kubectl内置,一般我们也可以使用-o json或者-o yaml查看其完整的资源信息.但是很多时候,我们需要关心的信息并不全面,因此我们需要自定义输出的 ...