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. kuangbin带我飞QAQ 最短路

    1. poj 1502 Mathches Game 裸最短路 #include <iostream> #include <string.h> #include <cstd ...

  2. 跟我一起做一个vue的小项目(三)

    接下来我们进行轮播的开发 安装插件,选用2.6.7的稳定版本 npm install vue-awesome-swiper@2.6.7 --save 根据其github上面的用法,我们在全局引用,在m ...

  3. 几个树形dp

    1.重建道路 树形dp基础题,f[i][j]表示在i这个点我和我的子树联通块大小为j最少砍几条边. 转移的时候,到下一个子树时上一个子树所有答案先++(此树直接砍掉不贡献答案),再继续dp. 注意更新 ...

  4. PHP--Button按钮没有设置type类型,默认会提交表单

    例如: <from > <input type='submit' value='提交'></input> <button >提交</button& ...

  5. LINQ(语言集成查询)

    LINQ,语言集成查询(Language Integrated Query)是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同的方式操作 ...

  6. PHP与RBAC设计思路讲解与源码

    在说权限管理前,应该先知道权限管理要有哪些功能: (1).用户只能访问,指定的控制器,指定的方法 (2).用户可以存在于多个用户组里 (3).用户组可以选择,指定的控制器,指定的方法 (4).可以添加 ...

  7. WPF 实现简单的跑马灯

    本文用WPF的动画实现一个简单的跑马灯 xmal: <Window x:Class="wpfstatusBar.MainWindow" xmlns="http:// ...

  8. 易语言连接RCON详细教程实例(演示连接Unturned服务器RCON)

    一.准备工作 工 具: 1.易语言 2.RCON服务端(这里我使用unturned服务器的RCON作为演示) 二.启动Unturned服务器并配置RCON 打开unturned服务器路径:F:\Unt ...

  9. vue里图片压缩上传组件

    //单图上传 <template> <div> <div class="uploader" v-if='!dwimg'> <van-upl ...

  10. golang之for

    1.常规for.结构如下: for 初始化语句; 条件语句; 修饰语句{ 循环体 } 2.条件for.结构如下: 初始化语句; for 条件语句 { 循环体 } 3.死循环 for.结构如下: for ...