[css] CSS3中的单位
FROM http://www.qianduan.net/understand-the-unit-of-length-in-the-css.html
CSS3中的单位: css3中引入了一些新的单位:
ch——字符0(零)的宽度;
rem——根元素(html元素)的font-size;
vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%;
vh——viewpoint height,视窗高度,1vh等于视窗高度的1%;
vmin——vw和vh中较小的那个。
显然vw、vh、vmin是针对移动设备的,如果视窗大小变化了,这三个值也会跟着相应的变化。
rem单位感觉就是px+em的变体,是否值得使用还要看你自己的取舍:没有px精确也没有em灵活——或者说,比px灵活,比em更精确~~。。。XD。。。
如果没有定义font-size怎么办? 其实不用担心,传说,各个浏览器史无前例的默认font-size:16px;,所以,即便你在样式文件中忘了定义font-size初始值,也可以放心的使用em、rem。
浏览器支持: rem,各浏览器基本都支持了, IE9+、FF3.6+、Chrome、Safari 5+、以及 Opera 11.6+
vw、vh、vmin,浏览器支持并不乐观,IE9支持了,Chrome目前不支持,Chrome 20将会重新支持(貌似之前支持过?)、Safari也即将支持了吧,Opera和Firefox也还都不支持。
[css] CSS3中的单位的更多相关文章
- 理解并使用CSS3中的单位rem vh vw vmin vmax
rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...
- CSS/CSS3中的原生变量var详解以及布局响应式网页扩展
使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...
- [css] css3 中的新特性加强记忆
css3被拆分成如下的小模块,选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局和用户界面 2D转换 使用transform:属性来为元素设置2D转换,兼容浏览器加前缀 –webki ...
- CSS和CSS3中的伪元素和伪类(总结)
好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...
- 一起来看看css中的单位
一起来看看css中的单位 由于一直以来对于css中的百分比单位究竟是相对于谁的比例,这个问题不是很了解,所以就专门找资料看了一下. <div class="container w500 ...
- css中关于单位的一些问题
Css中关于单位的一些问题 相对字体长度: Em:Em 是一个相对单位.起初排版度量时是基于当前字体大写字母”M”的尺寸的.当改变font-family时,它的尺寸不会发生改变,但在改变font-si ...
- CSS中的那点事儿(一)--- CSS中的单位2
在上篇博客提到了%.px.em三个单位,其中最复杂的是em,因为要计算当前元素内的font-size,必须知道其父元素的font-size,层层累积,容易出错.现在CSS3中引入了新的单位rem,改变 ...
- CSS3中的rem单位
一.rem介绍 rem是什么? 它的全称是 font size of the root element (根元素的字体大小) 它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font- ...
- CSS尺寸和字体单位-em、px还是%
在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置, ...
随机推荐
- Nodejs从有门道无门菜鸟起飞教程。
这是一篇菜鸟教程,这是一篇菜鸟教程,如果你是菜鸟到话. 简单来说Nodejs并不是一门新的语言,但是它可以让我们的JS运行在服务器端,在服务器端写JS代码并且输入输出,也就是说以后要是有人问你JS是不 ...
- Aspect Oriented Programming
AOP(Aspect Oriented Programming),面向切面编程(也叫面向方面)是目前软件开发中的一个热点.利用AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度 ...
- JSP网站开发基础总结《八》
JSP的学习总结到本篇已经八篇了,内容比较多,但都是实战,本篇最后为大家介绍一个小效果:百度分页.就是当我们遍历的数据对象较多时,这时我们就会看到了这个效果了,那他是如何实现的呢?下面我们就一起学习一 ...
- java匿名类和匿名对象及this的其他用法
/* 匿名内部类:就是内部类的简写格式. 必须前提:内部类必须继承或者实现一个类或者接口. 匿名内部类其实就是一个匿名 子类对象. 格式:new 父类对象 or 接口(){ 子类内容:(覆盖父类的, ...
- Oracle循环语句
PL/SQL有四种类型的循环:简单循环.WHILE循环.FOR循环以及游标FOR循环.在这里我们主要讨论前三种,除此之外,还将讨论Oracle 11g中新引入的CONTINUE语句. 一. 简单循环 ...
- [OpenCV] Samples 06: [ML] logistic regression
logistic regression,这个算法只能解决简单的线性二分类,在众多的机器学习分类算法中并不出众,但它能被改进为多分类,并换了另外一个名字softmax, 这可是深度学习中响当当的分类算法 ...
- 【web前端面试题整理05】做几道前端面试题休息休息吧
前言 连续学了两天javascript的东西了,我们都累了,于是今天还是上一套面试题吧,大家一起休息休息,也为下个星期可能会有的面试准备下. 题目一览 CSS1. overflow-x 属于 CS ...
- 动态分配的顺序线性表的十五种操作—C语言实现
线性表 定义:是最常用的,也是最简单的数据结构,是长度为n个数据元素的有序的序列. 含有大量记录的线性表叫文件 记录:稍微复杂的线性表里,数据元素为若干个数据项组成,这时把一个数据元素叫记录 结构特点 ...
- Spring学习总结(四)——表达式语言 Spring Expression Language
SpEL简介与功能特性 Spring表达式语言(简称SpEL)是一个支持查询并在运行时操纵一个对象图的功能强大的表达式语言.SpEL语言的语法类似于统一EL,但提供了更多的功能,最主要的是显式方法调用 ...
- JS中的原型继承机制
转载 http://blog.csdn.net/niuyongjie/article/details/4810835 在学习JS的面向对象过程中,一直对constructor与prototype感到很 ...