1:px:

这个应该是国内使用较多的单位,意思为像素。因此,其视觉的呈现效果是与分辨率相关的。例如在1024*768分辨率下看12px的字体就比960*640下看到的“小”,其实字体像素未改变,所以觉得在高分辨率下要小,在低分辨率下要大。默认浏览器采用16px的呈现方式。


如果设置字体单位为 %,例如:font-size:120%,则为16px*120%=19px;

2:  em:

相比国内来说,国外的站点更偏向于使用em,不仅是在font-size上,在margin和padding等上面也会使用,如知名的css设计网站-css禅意花园,http://www.csszengarden.com/。1em=16px;子元素的em的大小并不是具体固定的,子元素的em是在父元素的基础上计算的,例如:父元素为2em,子元素为1em,则子元素字体大小为1(子)*2(父)=2em;父元素为2em,子元素为2em,则子元素字体大小为2(父)*2(子)=4em如下:

.div2{
        font-size:2em;
}
p{
        font-size:1em;
      }

3:rem:

rem是css3出现的新的字体大小定义方式,其与em的区别是rem总是相对于html的跟元素(html),不会相对父元素。如下:

html{
font-size:1em;
}
.div2{
font-size:2rem;/*1(根元素)*2(自己)=2em(实际尺寸)*/ }
p{
font-size:1rem;/*1(根元素)*1(自己)=1em(实际尺寸)*/

  

4:pt:

pt不随浏览器分辨率的变化而发生视觉上的变化,永远看起来一样大。

css字体大小单位的更多相关文章

  1. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

  2. (转)CSS字体大小: em与px、pt、百分比之间的对比

    CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...

  3. CSS文字大小单位px、em、pt详解

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  4. CSS字体大小: em与px、pt、百分比之间的对比

      CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的 ...

  5. CSS——字体大小最常用的单位

    px (像素): 将像素的值赋予给你的文本.这是一个绝对单位, 它导致了在任何情况下,页面上的文本所计算出来的像素值都是一样的. ems: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更 ...

  6. Html 字体大小单位 px em pt

    网页上定义字体大小有常见三种单位,px.em.pt px px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在80 ...

  7. CSS文字大小单位px、em、pt(转)

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  8. 你应该知道的CSS文字大小单位PX、EM、PT[转]

    摘要: 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平 ...

  9. 谈谈css3的字体大小单位[rem]

    最近接收了一份面试题,内容是移动端传播的H5(在中国通常这么叫)广告页. 秉承移动端web尽量少用px的概念,我使用rem进行了一次重构.对于rem,基本是给 html/body 元素定义一个字体大小 ...

随机推荐

  1. 使用Python的requests库作接口测试——请求对象与响应对象

    任何时候调用requests.*()操作接口时,我们都在做两件事情: 1.构建一个Request对象,该对象被发送到服务器去请求或查询一些资源: 2.一旦requests得到一个从服务器返回的响应,就 ...

  2. [Array] 561. Array Partition I

    Given an array of 2n integers, your task is to group these integers into n pairs of integer, say (a1 ...

  3. ubuntn右上角小键盘消失及fictx切换输入法快捷键

    Ubuntu任务栏右上角的小键盘消失,打开系统设置-文本输入-左下角将当前输入法显示在任务栏. 切换输入法快捷键,打开系统设置 > 文件输入 >切换到下一个源(上一个源)的快捷键设置一个不 ...

  4. androidstudio实现增量更新步骤

    本文demo和参考例子参考-传送  门:http://blog.csdn.net/duguang77/article/details/17676797 一.增量更新优点:节省客户端和服务器端流量 增量 ...

  5. Excel函数学习:HLOOKUP函数

    Excel函数学习:HLOOKUP函数 HLOOKUP函数查找表的第一行中的值,返回该表中与找到的值在同一列的另一个值. 什么情况下使用HLOOKUP? HLOOKUP函数可以在查找行中找到精确匹配值 ...

  6. python 随机模块random

  7. Win7x64易语言调试进程无法退出

    这是个历史问题,几乎所有的Win7x64机器上都会碰到这个问题 解决方法: 启动黑月重新编译器

  8. 【洛谷P1632】点的移动

    P1632 点的移动 题目描述 平面上有N个整数坐标点.如果将点(x0,y0)移动到(x1,y1),则需要的代价为|x0-x1|+|y0-y1|.求使得K(K=1,-,N)个点在同一位置上最少需要的代 ...

  9. CSS实现火焰效果

    代码如下 //主要就是用css动画实现的 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  10. oracle 控制结构

    1.if 逻辑结构 if/then 结构是最简单的条件测试,如果条件为真,则执行程序的一行或者多行,如果条件为假,则什么都不执行, 示例: if  1>2 then null; end if ; ...