css的单位
如果你是一名前端开发工程师,一般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的单位的更多相关文章
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- CSS的单位及css3的calc()及line-height百分比
锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...
- 移动H5开发入门知识,CSS的单位汇总与用法
说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...
- H5移动端开发入门知识以及CSS的单位汇总与用法
说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...
- 2.css字体单位
这期简单说说css字体单位 字体单位有三种:px.em.rem 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px. % 百分比 in 英寸 cm 厘米 mm 毫米 e ...
- css常用单位
css常用单位 本文来简单介绍下css的常用单位. 绝对长度单位 绝对长度单位代表一个物理测量. 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度单位直接映射成像素.最终, ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- css中单位em和rem的区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- CSS的单位 及 css3的calc() 及 line-height 百分比
CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...
- css之单位
css之单位 角度<angle> 用于<gradient>s和某些transform功能中 deg表示以度为单位的角度.一整圈就是360deg. 例如:0deg,90deg,1 ...
随机推荐
- putty 中使用git
提交git pwd 查看当前目录 进入目录cd /home/gongfu/tripb/master 修改代码目录 git status 查看 修改的文件(新增的,删除的) git commit -m ...
- 7 个 jQuery 最佳实践
前言 随着富网络应用(rich web applications)数量的增长,以及用户对快速交互响应的高期望,开发者开始使用JavaScript库来快速高效的完成一些重复性的工作.这其中最流行的Jav ...
- Java线程--interrupt join yield setDaemon常用方法的使用
概念: 操作系统可以有多个进程,一个线程可以有一个或多个线程.进程与进程之间不共享内存,都在各自的空间中运行.而线程不仅可以共享内存,还可以用有一个自己的内存空间,叫做线程栈. 线程又称轻量级进程.J ...
- MySQL Replicationation进阶
摘要 上一篇: MySQL Replication 基础 下一篇 MySQL Replication-MHA 一.主主复制 二.半同步复制 三.复制过滤器 四.总结 五.切分 待续 一.主主复制 M ...
- poj 2299 Ultra-QuickSort 逆序对模版题
用树状数组求逆序数 唯一的坑点就是sum要用long long存 直接贴代码了 以后忘了还能直接看 2333…… PS:和hdu3743代码是一样的,因为两个都是逆序对模版题…… #include&l ...
- poj 1142 Smith Numbers
Description While skimming his phone directory in 1982, Albert Wilansky, a mathematician of Lehigh U ...
- Hexo搭建静态个人博客
Hexo简介 之前在Github上托管的博客就是使用jekyll搭建的,官方的Github Pages同样推荐使用它.我之前体验了一下jekyll,没有达到我想要的效果.于是寻找替代方案,搜索同类博客 ...
- 对象比较中 "相等性"和"同一性" 生动地解释
对象们都住在不同的房间里,每个房间只能住一个对象.对象们都被锁在房间里,永远没有办法搬家(至少从我们讨论的角度来说,这个说法是正确的).所以如果你知道了一个对象的房间号,就能找到对应的对象. 现在假如 ...
- javascript焦点图自动缓冲滚动
html中调用的js库,之前的随笔中有写,就不细说了,不明白的可以留言给我 <!DOCTYPE html> <html> <head> <meta chars ...
- ADO.NET基础、数据增删改查
ADO.NET:数据访问技术,就是将C#和MSSQL连接起来的一个纽带.我们可以通过ADO.NET将内存中的临时数据写入到数据库中,也可以将数据库中的数据提取到内存中供程序调用. 数据库数据的增.删. ...