理解并使用CSS3中的单位rem vh vw vmin vmax
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的更多相关文章
- 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...
- 关于CSS单位:rem vh vw vmin vmax
rem(root em) 如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size demo: body { font-size: ...
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...
- rem vh vw vmin vmax ex ch
rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设 ...
- [css] CSS3中的单位
FROM http://www.qianduan.net/understand-the-unit-of-length-in-the-css.html CSS3中的单位: css3中引入了一些新的单位: ...
- 尺寸单位em,rem,vh,vw
这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...
- 移动端css单位之 “vh” & “vw”
一.前言: 响应式web设计离不开百分比.但是,CSS百分比并不是所有的问题的最佳解决方案.CSS的宽度是相对于包含它的最近的父元素的宽度的.但是如果你就想用视口(viewpoint)的宽度或者高度, ...
- CSS3中的px,em,rem,vh,vw辨析
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...
- CSS3中的字体rem
rem和em都是相对单位,em相对父元素的font-size来计算,而rem是根据文档根元素(html)的font-size大小来计算的 通常将html的字体大小设为62.5%(等于10px),当然也 ...
随机推荐
- 关于VMware虚拟机启动EFI/UEFI支持
作为较新计算机和操作系统用于引导计算机的技术,可扩展固件接口 (EFI) 正在取代 BIOS.EFI 有时称为统一可扩展固件接口 (UEFI). 使用VMware创建虚拟机,默认还是会使用传统的BIO ...
- 快速幂解法--x^n
class Solution{ public: double myPow(double x,int n){ if(==x || n==) return ; if(n == ) return x; if ...
- 新Mac电脑pycharm爬虫环境安装与配置
*需要安装的软件:Pycharm.Squel pro.mysql.redis等. 1.下载安装pycharm. 2.下载安装item2. 3.安装brew:'ruby -e "$(curl ...
- 自动网络搜索(NAS)在语义分割上的应用(一)
[摘要]本文简单介绍了NAS的发展现况和在语义分割中的应用,并且详细解读了两篇流行的work:DARTS和Auto-DeepLab. 自动网络搜索 多数神经网络结构都是基于一些成熟的backbone, ...
- Java规则引擎 Easy Rules
1. Easy Rules 概述 Easy Rules是一个Java规则引擎,灵感来自一篇名为<Should I use a Rules Engine?>的文章 规则引擎就是提供一种可选 ...
- laravel里的队列学习
首先,我们要搞明白几个概念,从小到大依次有:队列任务,队列,连接. 他们属于依次被包含的关系,一个队列里有许多的队列任务,一个连接中可以有许多队列. 队列任务:对每个用户都会进行的操作,理解为队列任务 ...
- activeMQ从入门到简单集群指南
1.什么是amq MQ是消息中间件,基于JAVA的JMS消息服务机制来传递信息. 2.mq的作用 MQ给程序之间提供了一个缓冲,避免了在程序交互频繁的情况下,提高程序性能瓶颈和数据的可靠性 3.mq怎 ...
- 【JMeter_20】JMeter逻辑控制器__事务控制器<Transaction Controller>
事务控制器<Transaction Controller> 业务逻辑: 这个控制器在在业务控制上并没有什么特殊逻辑,可以理解为在简单控制器的基础上添加了统计的功能,当所有子节点全部成功则成 ...
- cb38a_c++_STL_算法_transform
cb38a_c++_STL_算法_transformtransform()算法有两种形式:transform(b1,e1,b2,op);//b1(源区间)的数据通过op函数处理,存放在b2(目标区间) ...
- 循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用
在VUE+Element 前端应用中,图标是必不可少点缀界面的元素,因此整合一些常用的图标是非常必要的,还好Element界面组件里面提供了很多常见的图标,不过数量不是很多,应该是300个左右吧,因此 ...