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. Django项目:CRM(客户关系管理系统)--45--37PerfectCRM实现King_admin添加用户时密码加密

    #views # ————————02PerfectCRM创建ADMIN页面———————— from django.shortcuts import render # ————————04Perfe ...

  2. ubuntu setup.py 安装时报Error -5 while decompressing data: incomplete or truncated stream

    缺少 python-devel 包 apt-get install python-dev -y

  3. Android中Activity的android:windowSoftInputMode属性

    转载 https://blog.csdn.net/qiutiandepaomo/article/details/84028558 windowSoftInputMode属性主要是用来设置窗口软键盘的交 ...

  4. Redis → Windows下搭建redis集群

    一,redis集群介绍 Redis cluster(redis集群)是在版本3.0后才支持的架构,和其他集群一样,都是为了解决单台服务器不够用的情况,也防止了主服务器宕机无备用服务器,多个节点网络互联 ...

  5. codevs1214 线段覆盖

    1214 线段覆盖 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold       题目描述 Description 给定x轴上的N(0<N<100)条线段, ...

  6. eclipse中部署web项目

    因为eclipse是免费的,所以很多企业都会选用eclipse作为开发工作,那么我们就需要熟练使用eclipse部署web项目. 第一步:选择window -> preferences ,选择s ...

  7. python中在计算机视觉中的库及基础用法

    基于python脚本语开发的数字图像处理包有很多,常见的比如PIL.Pillow.opencv.scikit-image等.PIL和pillow只提供了基础的数字图像处理,功能有限:OpenCV实际上 ...

  8. 数据挖掘案例:基于 ReliefF和K-means算法的应用

    数据挖掘案例:基于 ReliefF和K-means算法的应用 数据挖掘方法的提出,让人们有能力最终认识数据的真正价值,即蕴藏在数据中的信息和知识.数据挖掘(DataMiriing),指的是从大型数据库 ...

  9. oracle-Normal

    从shutdown normal命令发布起, 禁止建立任何新的oracle连接. 数据库将等到所有用户都被断开后再继续关闭过程. 等待当前所有已连接的用户断开与数据库的连接

  10. 【POJ 3294】Life Forms

    [链接]h在这里写链接 [题意] 给你n个字符串. 让你找最长的字符串s; 这个s在超过一半的子串里面都有出现过且长度大于n/2; 如果有多个,输出多行. (按字典序输出) 也没说会不会出现大写. [ ...