[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还是%
在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置, ...
随机推荐
- 敏捷数据科学:用Hadoop创建数据分析应用
敏捷数据科学:用Hadoop创建数据分析应用(数据分析最佳实践入门敏捷大数据首作分步骤|全流程演示思路.工具与方法) [美]Russell Jurney(拉塞尔·朱尔尼) 著 冯文中 朱洪波 译 ...
- fir.im Weekly - 一切从知识重构开始
一年之计在于春,大自然开始了新元素的重构.你的知识库是否也该重构更新呢? 本期 fir.im Weekly 包含最新的Android.iOS 开发工具.源码和好玩的UI 动画分享,希望对你有用. Sw ...
- Android 实现应用升级方案(暨第三方自动升级服务无法使用后的解决方案)
第三方推送升级服务不再靠谱: 以前在做Android开发的时候,在应用升级方面都是使用的第三方推送升级服务,但是目前因为一些非技术性的问题,一些第三方厂商不再提供自动升级服务,比如友盟,那么当第三方推 ...
- angularjs with node service
- 如何解决loadrunner回放日志中的乱码问题
在Loadrunner回放脚本时,会看到replay log区会展示脚本回放时的信息.有时候选中了打印服务器返回具体信息后,服务器返回的中文字符为乱码.怎么破? 原来Loadrunner的replay ...
- chrome开发总结(交互/权限/存储)-爬虫
chrome开发总结(交互/权限/存储)-爬虫 [TOC] 标签(空格分隔): 杂乱之地 经过一翻折腾.还是选择了chrome来做爬虫.主要是为了解决一些ajax加载的问题以及代理的问题. 1.chr ...
- PHP的学习--可变变量
可变变量 有时候使用可变变量名是很方便的.就是说,一个变量的变量名可以动态的设置和使用.一个普通的变量通过声明来设置,例如: <?php $a = 'hello'; ?> 一个可变变量获取 ...
- Unity 游戏存档 PlayerPrefs类的用法
unity3d提供了一个用于本地持久化保存与读取的类--PlayerPrefs.工作原理非常简单,以键值对的形式将数据保存在文件中,然后程序可以根据这个名称取出上次保存的数值. PlayerPr ...
- Java判断回文数算法简单实现
好久没写java的代码了, 今天闲来无事写段java的代码,算是为新的一年磨磨刀,开个头,算法是Java判断回文数算法简单实现,基本思想是利用字符串对应位置比较,如果所有可能位置都满足要求,则输入的是 ...
- JAVA 设计模式 访问者模式
用途 访问者模式 (Visitor) 表示一个作用于某对象结构中的各元素的操作. 它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作. 访问者模式是一种行为型模式. 用途