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. PHP jpgraph的一点小提示和方法

    PHP默认是不启用GD库的,因为需要在php.ini的配置文件中将extension=php_gd2.dll注释打开.打开后你就可以画一些你想画的各种奇葩图案了.什么?不会画?那回去学基础! 今天看了 ...

  2. js校验文本框只能输入数字(包括小数)

    form表单 <form method="POST" action=""> <input type="text" id=& ...

  3. Windows Sublime text3 搭建Go语言环境

    第一步:Go环境和配置 1.安装 Go 开发环境(省略),假设Go安装目录为 C:\Go 2.配置环境变量,下面两个环境变脸没有就加上. 资料参考:http://studygolang.com/art ...

  4. hihocoder 1142 三分·三分求极值(三分)

    题目1 : 三分·三分求极值 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 这一次我们就简单一点了,题目在此: 在直角坐标系中有一条抛物线y=ax^2+bx+c和一个点 ...

  5. macbook双网卡路由

    用route命令可以解决,步骤如下:1)确定你内网的网段,如果有多个都一一列出来,例如:192.168.1.0/24,10.20.0.0/16等 2)确定你内网网卡的网关IP,通过netstat -r ...

  6. Eclipse luna安装SVN

    Eclipse luna安装SVN 1.Subversive Plug in 的安装 打开Eclipse ,Help--->Install New Soft ----> 输入 “Luna ...

  7. spring的基于xml的AOP配置案例和切入点表达式的一些写法

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  8. flask的基本操作

    常用的SQLAlchemy字段类型 # coding:utf-8 from flask import Flask from flask_sqlalchemy import SQLAlchemy app ...

  9. Linux监听的网络服务$ netstat -ntlp$ netstat -nulp$ netstat -nxlp

    我一般都分开运行这三个命令,不想一下子看到列出一大堆所有的服务.netstat -nalp倒也可以.不过我绝不会用 numeric 选项 (鄙人一点浅薄的看法:IP 地址看起来更方便). 找到所有正在 ...

  10. linux系统服务

    系统服务分类,根据其使用的方法来分,可以被分为三类 a.由init控制的服务:基本都是系统级别的服务,运行级别这一章讲的就是这一类的服务 b.由System V启动脚本启动的服务:和我们打交道最多的一 ...