罗列了CSS中常用的长度单位及比较

单位 含义
em 相对于父元素的字体大小
ex 相对于小写字母"x"的高度
rem 相对于根元素字体大小
px 相对于屏幕分辨率而不是视窗大小:通常为1个点或1/72英寸
in inch, 表英寸
cm centimeter, 表厘米
mm millimeter, 表毫米
pt 1/72英寸
pc 12点活字,或1/12点
% 相对于父元素。正常情况下是通过属性定义自身或其他元素
vw 相对于视窗的宽度:视窗宽度是100vw
vh 相对于视窗的高度:视窗高度是100vh
vm 相对于视窗的宽度或高度,取决于哪个更小
ch 相对于0尺寸
gd 一般用在东亚字体排版上,这个与英文并无关系

px

像素(Pixel)。像素px是相对于显示器屏幕分辨率而言的。是较常用的长度单位。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.在没有任何CSS规则的前提之下,任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

使用em需要注意,em值不是固定的,em会继承父级元素的大小。例如,当设置了font-size属性后,它会逐级向上相乘,所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里,而这个元素又在另一个设置了font-size:1.1em的元素里,那么最后计算的结果是1.1X1.1X1.1=1.331rem(根em)。这意味着即使一个元素设置为10em,这个元素也不会在他出现的每个地方都是10em。如果font-size变化了,它可能会宽点,也可能会窄点。

rem

rem也是相对单位.不过它总是相对根元素的长度。它不会像em一样,使用级联的方式计算。这个使用起来就更简单些。它是CSS3引入的。

但rem只在IE9+,Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome和Opera11+等浏览器中被支持,IE6-8不支持。

vw

vw是可视区域宽度单位。1vw即可视区域宽度的百分之一。这有些和百分比宽度相似,但是,vw对于所有的元素都一样,与父元素的宽度无关。但是支持这个单位的浏览器很少,在移动浏览器中只有ios6支持。其他可视区域单位浏览器支持情况类似。

百分比宽度

百分比宽度是基于父元素的宽度计算的。

要用哪种呢?

px

px是用的比较多的长度单位,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览Web页面时,他改变了浏览器的字体大小,这时会使Web页面布局被破坏。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。

em

使用em比较难处理的地方,是em是相对于父元素大小来确定其大小的。这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的问题。

rem

CSS3新定义的rem,这样就可以根据根元素确定字体的大小了。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。另外,除了IE8及更早版本外,所有浏览器均已支持rem。

如果想使用rem,并兼容IE6-8,可以px与rem一起用。如果目标用户都使用新浏览器,就可以放心用rem了。

rem很受欢迎。。。

CSS长度单位的更多相关文章

  1. CSS长度单位及区别 em ex px pt in

    1.         css相对长度单位 Ø         em          元素的字体高度 Ø         ex           字体x的高度 Ø         px        ...

  2. CSS长度单位详解

    序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇 ...

  3. Qt ------ CSS 长度单位

    1.         css相对长度单位 Ø         em          元素的字体高度 Ø         ex           字体x的高度 Ø         px        ...

  4. CSS长度单位:px和pt的区别

    先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:而pt就是point,是印刷行业常用单位,等于1/72英寸. 这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个 ...

  5. css长度单位学习(em,rem,px,vw,vh)

    绝对长度单位 绝对长度单位代表一个物理测量 [像素px(pixels)] 像素,为影像显示的基本单位,译自英文"pixel",pix是英语单词picture的常用简写,加上英语单词 ...

  6. css中pt、px、em、ex、in等这类长度单位详细说明

    在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位.它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt ...

  7. CSS的长度单位

    对于css的长度单位真的有必要知道一下.那么css长度单位有哪些呢? 分成两大类: 1.绝对单位:不会因为其他元素的尺寸变化而变化.坚持自我. 2.相对单位:没有一个确定的值,而是由其他元素的尺寸影响 ...

  8. CSS选择器,属性前缀,长度单位,变形效果,过渡效果,动画效果

    CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E[foo]属性 ...

  9. CSS语法小记

    一.CSS语法结构 语法:选择符{属性:值} 例如:body{font-size:12px;} 参数说明: 1.选择符(Selector):指明这组样式所要针对的对象.可以是一个XHTML标签,例如h ...

随机推荐

  1. zookeeper进行leader选举

    一.如何进行leader选举 创建 /lj/producer和/lj/master/producer外层节点 创建临时顺序节点 判断自己是否是master节点(判断流程:遍历/lj/producer节 ...

  2. .net EntityFramework用法探索系列 1

    EntityFramework用法探索系列 (一)DatabaseFirst (二)CodeFirst (三)CodeFirst流畅API (四)Repository和UnitOfWork (五)引入 ...

  3. OC知识点

    1.@autoreleasepool why1 2.retain O-C内存管理和点语法1>OC内存管理正常情况要使用大量的retain和relrese操作2>点语法可以减少使用retai ...

  4. Android 自定义ScrollView 支持惯性滑动,惯性回弹效果。支持上拉加载更多

    先讲下原理: ScrollView的子View 主要分为3部分:head头部,滚动内容,fooder底部 我们实现惯性滑动,以及回弹,都是靠超过head或者fooder 就重新滚动到  ,内容的顶部或 ...

  5. [rm] Linux 防止"rm -rf /" 误删除

    一.缘由: 最近看到这则新闻,很是悲伤,因为我最近也在用ansible:然而这一错误源自Ansible上糟糕的代码设计,这款Linux实用工具被用于在多台不同服务器上自动执行脚本. 开发者解释到,实际 ...

  6. c++学习-多态性

    强制转换父类对象为子类 #include<iostream> #include<string> #include <typeinfo> using namespac ...

  7. pedagogical

    在线考试     // '+this+''; }); //alert(错了); $("#ans").html(html); } function clk(obj){ var inp ...

  8. purple-class2-默认选项切换

    ylbtech-class:purple-class2 A, 返回顶部 1,默认选项切换 #region 默认选项切换 public delegate IList<SelectListItemI ...

  9. 如何使用javadoc

    package com.frank.chapter1; // object.Documentation1.java // TIJ4 Chapter Object, Exercise 13 - 1 /* ...

  10. jquery validate.addMethod 正则表达式

    $(document).ready(function () { /* 设置默认属性 */ $.validator.setDefaults( { submitHandler: function (for ...