[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还是%
在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置, ...
随机推荐
- atitit.错误:找不到或无法加载主类 的解决 v4 qa15.doc
atitit.错误:找不到或无法加载主类 的解决 v4 qa15.doc 1.1. 修改此java文件,让他启动编译,还是不能生成了新的class, 1.2. 估计ide调试锁死class ,查看de ...
- 使用JSExcelXML.js导出Excel模板
github地址:https://github.com/464884492/JSExcelXml 业务系统显示效果图 导出模板图 功能描述 世间万物总是相生相克,既然我们的客户要求有导出Ex ...
- python2与python3在windows下共存
python有python2(工业版)和python3,有时候我们会希望电脑上既有python2也有python3,!假设我们已经安装好,python2和python3了, 接下来我们找到python ...
- JSP网站开发基础总结《三》
经过前两篇的总结,我想大家一定迫不及待的想学习今天的关于jsp与mysql的数据库连接的知识了.既然需要连接mysql数据库,你首先需要保证你的电脑已经安装过mysql数据库,mysql数据库的安装步 ...
- 寻找表达式(dfs)
题目来源:微策略2013年校园招聘笔试题 题目描述: 现在有一个序列123......N,其中N介于3和15之间,要求在序列之间加入+.-或者空格,使得该序列组成的数学表达式的运算结果为0. 输入: ...
- MFC 字符串类CString 源代码
原文:http://blog.csdn.net/benny5609/article/details/1926088 CString使用的是引用技术,可以共享数据(这个大家都知道),另外空的CStirn ...
- 轻松搭建Unity3D 安卓Android开发环境
1,下载安装Java的JDK: http://www.oracle.com/technetwork/java/javase/downloads/index.html (JDK中,包含JRE) 如果是6 ...
- Spark入门实战系列--1.Spark及其生态圈简介
[注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .简介 1.1 Spark简介 年6月进入Apache成为孵化项目,8个月后成为Apache ...
- HTML5第二节
第二回合:HTML5的新特性 与之前的HTML4.01相比,HTML5增加了非常多的改变: ① 新的语义元素:<article>.<aside>.<figure>. ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十】
<Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...