如果你是一名前端开发工程师，一般px和em使用频率比较高。但是今天的重点是介绍一些我们使用很少、甚至木有听说过的单位。

一、em

<style type="text/css">

    body {font-size: 12px;}

    div  {font-size: 1.5em;}

</style>

<body>

    <div>

        Test-01 (12px * 1.5 = 18px)

        <div>

            Test-02 (18px * 1.5 = 27px)

            <div>

                Test-03 (27px * 1.5 = 41px)

            </div>

        </div>

    </div>

</body>

因为font-size具有继承性，所以层数越深字体越大。

二、rem

虽然上面使用em的情况可能会在开发中用到，但是我们有时候想有一个基准来扩展。遇到这种需求时，我们可以使用rem单位，rem中的“r”代表“root”，这意味着设置当前元素的字体大小为根元素，大多数情况下，我们会设置在html元素上。

<style type="text/css">

    html {font-size: 12px;}

    div  {font-size: 1.5rem;}

</style>

<body>

    <div>

        Test-01 (12px * 1.5 = 18px)

        <div>

            Test-02 (12px * 1.5 = 18px)

            <div>

                Test-03 (12px * 1.5 = 18px)

            </div>

        </div>

    </div>

</body>

当然，rem单位不仅应用在字体上，还可以实现到CSS 网格系统中。

三、vh 和 vw

在进行响应式布局时，我们常常会使用百分比来布局，然而CSS的百分比不总是解决每个问题的最佳方案，CSS的宽度相对于离它最近的父元素的宽度。
如果你想使用视口的宽度、高度而不是父元素的宽高，可以使用vh和vw单位。 1vh = viewportHeight * 1/100; 1vw =
viewportWidth * 1/100; 使用vh、vw就可以保证元素的宽高适应不同设备。

四、vmin 和 vmax

vw和vh对应于viewport的width和height，而vmin和vmax分别对应于width、height中的最小值和最大值，例如如果浏览器的宽/高被设置为1000px/600px，那么

1vmin = 600 * 1/100;

1vmax = 1000 * 1/100;

下面我们来看看几个实例：

4.1 一个正方形元件总是触摸至少两个屏的边缘

<style type="text/css">

.box {

    height: 100vmin;

    width : 100vmin;

}

</style>

<body>

    <div class="box" style="background-color: #f00">

        fdasjfdlas

    </div>

</body>

4.2 覆盖全屏

<style type="text/css">

    body {

        margin: 0;

        padding:0;

    }

    .box {

        /*宽屏显示器width > height*/

        height: 100vmin;

        width : 100vmax;

    }

</style>

 

<div class="box" style="background-color: #f00">

    fdasjfdlas

</div>

五、ex 和 ch

ex、ch单位与em、rem相似之处在于都依赖于font-size，但是ex、ch还依赖于font-family，基于font-specific来计算。

用一副图来解释这两种单位的含义：

这两种单位，有许多用途，大部分是用于印刷时的微调整。例如，sup、sub元素分别显示上标和下标，但是我们可以使用position和bottom模拟：

<style type="text/css">

body {

    margin: 0;

    padding:0;

}

 

.sup {

    position: relative;

    bottom: 1ex;

}

.sub {

    position: relative;

    bottom: -1ex;

}

</style>

<div>

    AaB<span class="sup">b</span>CcXxD<span class="sub">d</span>EeFf

</div>

css的单位的更多相关文章

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

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

  2. CSS的单位及css3的calc()及line-height百分比

    锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...

  3. 移动H5开发入门知识，CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  4. H5移动端开发入门知识以及CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  5. 2.css字体单位

    这期简单说说css字体单位 字体单位有三种:px.em.rem 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px. % 百分比 in 英寸 cm 厘米 mm 毫米 e ...

  6. css常用单位

    css常用单位 本文来简单介绍下css的常用单位. 绝对长度单位 绝对长度单位代表一个物理测量. 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度单位直接映射成像素.最终, ...

  7. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  8. css中单位em和rem的区别

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

  9. CSS的单位 及 css3的calc() 及 line-height 百分比

    CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...

  10. css之单位

    css之单位 角度<angle> 用于<gradient>s和某些transform功能中 deg表示以度为单位的角度.一整圈就是360deg. 例如:0deg,90deg,1 ...

随机推荐

  1. iOS开发设置关于tabBar和navigationBar以及item中的一些全局属性

    /* To set item label text attributes use the appearance selectors available on the superclass, UIBar ...

  2. php基础（六）Include

    本文内容来自http://www.w3school.com.cn/php/php_file.asp 服务器端包含 (SSI) 用于创建可在多个页面重复使用的函数.页眉.页脚或元素. include ( ...

  3. 5、Web应用程序中的安全向量 -- Open Redirect Attack（开放重定向）

    开放重定向攻击的概念:那些通过请求(如查询字符串和表单数据)指定重定向URL的Web应用程序可能会被篡改,而把用户重定向到外部的恶意URL. 在执行重定向之前需先检查目标地址的有效性,可使用Url.I ...

  4. Java 相关注意事项小结

    程序是一系列有序指令的集合: Java主要用于开发两类程序: 1)桌面应用程序2)Internet应用程序1,Java程序:三步走,编写--编译--运行:2,使用记事本开发:1)以.java为后缀名保 ...

  5. [ An Ac a Day ^_^ ] CodeForces 586C Gennady the Dentist 模拟

    题意: n个小朋友去拔牙 每个小朋友在拔牙的时候会哭 哭声是vi分贝 距离门口vi远的小朋友听到了哭声会害怕 他们的勇气值p会减少d 如果勇气值p小于等于零 他们就会在门外哭并立即离开拔牙队列(回家找 ...

  6. vultr vps官网改版免费注册教程（最新优惠码）

    本站强烈推荐的,国外超高性价比vps服务器Vultr官方网站最近更新了,导致一些朋友心生茫然,今天写个简易教程给大家. 首先是打开vultr官网,免费注册一个vultr账号.填写邮箱地址.密码,非常简 ...

  7. CEdit实现文本换行

    CEdit控件若要在字符串中插入换行字符("\r\n")实现换行效果,必须指定两个风格 ES_MULTILINE和ES_WANTRETURN. 1: DWORD dwStyle = ...

  8. 监控mysql主从

    这里记录了,每次都百度查询多次. zabbix默认包含mysql监控 其中包含 mysql的基本状态监控 MySQL主从监控需要结合自定义 1)目前项目需求 只对 Slave_IO_Running . ...

  9. E - Triangle

    Description Johnny has a younger sister Anne, who is very clever and smart. As she came home from th ...

  10. IE/Chrome背景图片居中1px偏移解决方法

    最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面 ...