精华内容
下载资源
问答
  • 主要介绍了css中的px、em、rem、pt 之间的特点和区别及换算,各大小单位是否继承父元素大小及浏览器兼容与否等方面也做了详细解释,需要的朋友可以参考下
  • 主要介绍了CSS Font-Size: em、 px 、pt 、Percent之间的关系及换算,本篇整理的还是比较详细的,需要的朋友可以参考下
  • html,CSS文字大小单位px、em、pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚p...

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

     

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为:

    1. IE无法调整那些使用px作为单位的字体大小;
    2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
    3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

    px像素(Pixel)是相对长度单位,像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

    em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

    字体单位使用em能支持IE6下的字体缩放,在页面中按ctrl 滚轮,字体以px为单位的网站没有反应。

    px是绝对单位,不支持IE的缩放。
    em是相对单位,网页中的文字能放大和缩小。将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。
    任意浏览器的默认字体高都是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有如下特点:
    1. em的值并不是固定的;
    2. em会继续父级元素的字体大小。

    所以我们在写CSS的时候,需要注意:
    1. body选择器中声明Font-size=62.5%;(Font-size=63%;用于ie6兼容)
    2. 将你的原来的px数值除以10,然后换上em作为单位;
    3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
    也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继续#content的字体高而变为了1em=12px。
    但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

    单位pt的说明

    在印刷排版中,point是一个绝对值,它等于1/72英寸,可以用尺子丈量的,物理的英寸。但是在css中pt含义却并非如此。因为我们的显示器被分割为了一个个的像素,单个像素只能有一种颜色 (为了简化,这里暂不讨论次像素反锯齿技术),要在屏幕上显示,必须先把以 pt 为单位的长度转换为以像素为单位的长度,这个转换的媒介,就是 DPI (事实上,这里的所谓的 DPI,是操作系统和浏览器中使用的术语,即为 PPI, pixels per inch,和扫描仪、打印机、数码相机中的 DPI 是不同的概念)。

    例如,无论在哪个操作系统中,Firefox 浏览器默认的 DPI 都是 96,那么实际上 9pt = 9 * 1/72 * 96 = 12px。

    所以,虽然“DPI”中的“I”和“1pt 等于 1/72 inch”中的“inch”,都不代表物理上的英寸,但这两个单位互相之间是相等的,也就在相乘中约掉了。

    那么,真实的物理长度怎么计算呢?请拿出一把尺子,丈量你的显示器的可见宽度 (我这里是 11.2992 英寸),除以横向分辨率 (我这里是 1024 像素),得到的就是每个像素的物理长度。

    现在我们可以回答这样一个问题,网页上 9pt 的字体究竟占用了多宽的空间?答案是:  9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 厘米。

    虽然pt是绝对单位,但是那只是针对输出设备而言的,在文字排版工具(word,abobe)中是非常有用的字体单位。不管显示器的分辨率是多少,打印在纸面上的结果是一样的。

    但是网页主要为了屏幕显示,而不是为了打印等其他需要的。而px能够精确地表示元素在屏幕中的位置和大小。

    当然。在dpi是96的情况下,9pt=12px。

    原文链接:http://www.2cto.com/kf/201210/160930.html

    附px、em、%和pt换算表

    px,em,pt对照表\

     

    展开全文
  • css的长度换算

    千次阅读 2012-03-23 11:27:57
    1in = 2.54cm = 25.4 mm = 72pt = 6pc ; PX to EM: Example: 12px / 16px = .75em PX to %: Example: 12px / 16px * 100 = 75% PX to PT: Example: 16px * 72 (72 points = 1 inch) / 96 (96 ...

        1in = 2.54cm = 25.4 mm = 72pt = 6pc ;

    • PX to EM: Example: 12px / 16px = .75em
    • PX to %: Example: 12px / 16px * 100 = 75%
    • PX to PT: Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 12pt
    • EM to PX: Example: .75em * 16px = 12px
    • EM to %:Example: .75em * 100 = 75%
    • % to PX:Example: 75 * 16px / 100 = 12px
    • % to EM:Example: 75 / 100 = .75em
    • PT to PX: Example: 12pt * 96ppi / 72ppi = 16px

    Pixels EMs Percent Points
    6px 0.375em 37.5% 5pt
    7px 0.438em 43.8% 5pt
    8px 0.5em 50% 6pt
    9px 0.563em 56.3% 7pt
    10px 0.625em 62.5% 8pt
    11px 0.688em 68.8% 8pt
    12px 0.75em 75% 9pt
    13px 0.813em 81.3% 10pt
    14px 0.875em 87.5% 11pt
    15px 0.938em 93.8% 11pt
    16px 1em 100% 12pt
    17px 1.063em 106.3% 13pt
    18px 1.125em 112.5% 14pt
    19px 1.188em 118.8% 14pt
    20px 1.25em 125% 15pt
    21px 1.313em 131.3% 16pt
    22px 1.375em 137.5% 17pt
    23px 1.438em 143.8% 17pt
    24px 1.5em 150% 18pt
    展开全文
  • 本文章重要说明px,em,rem,pt的区别以及四者之间的换算。 em单位有如下特点 1. em的值并不是固定的;  2. em会继承父级元素的字体大小。 我们在写CSS的时候如果要用em为单位,需要注意两点:  1. body...

      本文章重要说明px,em,rem,pt的区别以及四者之间的换算。

     

     

    em单位有如下特点

    1. em的值并不是固定的;

      2. em会继承父级元素的字体大小。

    我们在写CSS的时候如果要用em为单位,需要注意两点:

      1. body选择器中声明Font-size=62.5%;

      2. 将你的原来的px数值除以10,然后换上em作为单位;

      3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

      也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

      但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。

     

    em特点 

            rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

     

    一个例子:

    p {font-size:14px; font-size:.875rem;}

    注意: 

     

            选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

     

    在这里为大家提供一个px,em,rem单位转换工具

    地址:http://pxtoem.com/

    高级em与px换算:任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 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作为单位就行了。

    具体使用时候:我们在对全体html标签声明初始一次font-size=62.5%如:*{font-size=62.5%}即可此后面布局可依据以下技巧进行设置em单位font-size:1.2em等于font-size:12pxfont-size:1.4em等于font-size:14px以此类推相当于初始font-size=62.5%后,em与px单位就只有10倍差距,以便方便计算与设置em长度数值使用。

     

     

     

    备注:理解内边距和外边距的em值。

      当em值用于内边距和外边距时,它的值是相对于元素的字体大小的,而不是相对于父元素字体大小的(你可能会这样认为)。计算内边距和外边距的em值的公式为:要指定的字体大小/元素的字体大小=值。

      举例:设想一个简单的例子,其中的段落p定义为{font-size:14px;padding:0.5em}。那么,它在四个边的内边距都是7px,因为7/15=0.5。如果将字体大小修改为20px,内边距就会自动变成10px。这就是em这样的相对单位的作用——随着布局放大或者缩小,布局的比例始终保持不变。

      同理,外边距和内边距一样。

     

    转载于:https://www.cnblogs.com/yyy6/p/5927300.html

    展开全文
  • pt 印刷行业常用单位em 相对单位,相对父元素属性的单位 ,一般用于移动端布局rem 结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了转换公式:pt=px乘以3/4倍数em=倍数...

    px 即像素,一般国内网站使用较多,默认大小是16px;

    pt 印刷行业常用单位

    em  相对单位,相对父元素属性的单位 ,一般用于移动端布局

    rem  结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了

    转换公式:

    pt=px乘以3/4

    倍数em=倍数x16px

    注意:1em=16px。那么12px=0.75em,10px=0.625em。

    em的用法

    在代码重写的过程中,为了简化font-size的换算,在body选择器中声明font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了.步骤如下:

    1).body选择器中声明Font-size=62.5%;

    2).将你的原来的px数值除以10,然后换上em作为单位;

    此时有的字体会大的出奇,因为em的值不固定,又会继承父级元素的大小,比如

    body{font-size=62.5%;}  ①

    div{font-size:1.2em;}   ②

    p{font-size:1.2em;}  ③

    解释: 其中p属于div的子集,①的设置使12px=1.2em,10px=1em,px和em成十倍关系;所以②的设置使得div字体大小为1.2em=12px;③中p的大小设置是相对②中div字体来说的,所以p的字体大小是1.2*12px=14.4px;而不是十倍关系了;

    3).重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的,将③改为p{font-size:1em;}即可。

    em有如下特点:

    1. em的值并不是固定的;

    2. em会继续父级元素的字体大小。

    所以我们在写CSS的时候,需要注重三点:

    1. body选择器中声明Font-size=62.5%;

    2. 将你的原来的px数值除以10,然后换上em作为单位;

    3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

    HTML中字体单位px pt em之间的转换

    在实现打印功能时,遇到一个问题,使用px作为单位在不同的机器或者打印机上打印出的字体大小不一样,所以经过查询,发现使用pt为单位能够进行物流适配,下面是各单位之间的转换: 定义字体大小有常见三种单位, ...

    css中的单位px,em和rem的区别

    一.px: px就是像素,用px设置字体大小的时候会比较精确,但是有时候我们会使用不同屏幕尺寸去浏览网页.当页面相应的扩大或者缩小的时候,页面的字体大小就会出现过小或者过大.由于这种问题,就提出了使用 ...

    CSS中的单位px、em、rem、%、vw、vh、vm

    px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...

    关于CSS中的单位px、em、rem

    首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...

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

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

    vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

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

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

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

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

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

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

    随机推荐

    BZOJ 1044 木棍分割

    二分+dp. #include #include #include #include

    CDOJ 92 – Journey 【LCA】

    [题意]给出一棵树,有n个点(2≤N≤105),每条边有权值,现在打算新修一条路径,给出新路径u的起点v,终点和权值,下面给出Q(1≤Q≤105)个询问(a,b)问如果都按照最短路径走,从a到b节省了 ...

    SPI总线的4种工作模式

    spi总线的4种工作模式 0 to 4 modes SPI接口的全称是"Serial Peripheral Interface",意为串行外围接口,是Motorola首先在其MC6 ...

    Android开发之漫漫长途 Fragment番外篇——TabLayout+ViewPager+Fragment

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了以及

    php(二)使用thinkphp搭建项目

    1.创建项目根目录,配置虚拟主机 1.1.创建项目根目录phpDemo01,将thinkphp_3.2.3_full.zip压缩包中ThinkPHP文件夹复制到项目根目录phpDemo01中. 1.2 ...

    c#dataGridView 知识

    一.单元格内容的操作 // 取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index Conso ...

    SubLime Text 3 配置SublimeREPL来交互式调试程序

    1. 安装 SublimeREPL 插件 等待一下,输入sublimerepl,选择sublimeREPL,然后它就会在后台安装. 安装完之后,查看如下图 选择你要执行的*.py文件,通过这个路径,选 ...

    Python中常见的字符串小笔试题

    1.获取实现两个字符串中最大的公共子串 思路:    1.比较两个字符串的长度 2.获取较短字符串的所有子串 3.使用__contains__函数进行比较 4.把子串当做键,子串长度作为值,存入字典, ...

    gevent和tornado异步

    阅读目录 从 Tornado 说起 再来看下 Gevent 总要总结一下 原文:http://www.pywave.com/2012/08/17/about-gevent-and-tornado/ 还 ...

    展开全文
  • CSS Font-Size: em、px 、pt 、Percent之间的关系及换算发布时间:2014-05-15 17:08:09 作者:佚名 我要评论这篇文章主要介绍了CSS Font-Size: em、 px 、pt 、Percent之间的关系及换算,本篇整理的还是比较详细的,...
  • 常用px,pt,em换算

    2018-06-14 14:22:50
    pt px em 初号 42pt 56px 3.5em 小初 36pt 48px 3em 34pt 45px 2.75em 32pt 42px 2.55em 30pt 40px 2.45em 29pt 38px 2.35em 28pt 37px 2.3em 27pt 36px 2.25em 一号 26pt 35px 2.2...
  • 在IE6.0字体设定为中的时候,如果字体未做任何CSS设定或者元素的设定,默认的字体是12pt,或者16px,或者1em,或者font size=3。em、px、pt换算关系如下: 1em=16px 1em=12pt 1px=1/16 em=0.0625em 1px=3/4 pt=...
  • 1、PX(CSS pixels)1.1 定义虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px。1.2 注意在CSS规范中,长度单位可以分为两类,绝对(absolute)...
  • 这里会对目前使用到的各种 CSS 单位做简单的分析,主要涉及有 px、pt、em、rem、vh/vw、% 等。相对单位可以尽可能的让元素按照比例进行缩放,从而保证布局的完整性。dpi精度 DPI(Dots Per Inch,每英寸像素数),在...
  • css: px转rem换算方法

    2021-02-01 20:14:12
    } 因为一般浏览器将font-size定义为16px,可以计算得 16px * 62.5% = 10px 这样就可以使用十进制进行px-rem换算了, 例如上面的例子,如果设计稿是750px尺寸,则rem值= 100px / 10 / 2,结果为5rem
  • 前段时间,终于仔仔细细的把pt、px、em、rem了解了一遍,特意将其相关内容整理成文章,希望能对有需要的人有所帮助。...单位换算:1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px px单位名称为像素,相对
  • HTML/CSS 长度单位 px和pt的区别

    千次阅读 2018-05-26 00:13:41
    CSS长度单位 px和pt的区别先说一下基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point,是印刷行业常用单位,等于1/72英寸。可以知道,px是一个点,它不是自然界的长度单位,谁能说出一...
  • 字号、pt、px、em换算对照表

    千次阅读 2017-10-11 12:00:01
    字号、pt、px、em换算对照表  (2011-04-26 11:10:17) 转载▼ 标签:  杂谈 分类: div css pt (point,磅) 是一个物理长度单位,指的是72分之一英寸。 px
  • css3单位之间的换算

    千次阅读 2016-09-18 16:38:36
    css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px)...
  • px是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。 2. pt(point,磅...
  • CSS的em、px、pt长度单位转换

    千次阅读 2013-11-06 11:03:03
    CSS的em、px、pt长度单位转换 在IE6.0字体设定为中的时候,如果字体未做任何CSS设定...em、px、pt换算关系如下:  1em=16px 1em=12pt 1px=1/16 em=0.0625em  1px=3/4 pt=0.75pt 1pt=1/12 em≈0.0833em
  • CSS 字体单位大小对照换算

    千次阅读 2015-09-24 09:51:32
    字号“数值”越大,字就越小。    中文字号 英文字号(磅) ...72pt 25.30mm 95.6px  大特号 63pt 22.14mm 83.7px 特
  • 浅谈CSS单位px、pt、em和rem

    千次阅读 2017-04-13 21:56:20
    1、em em实质是一个相对值,而非具体的数值,因此需要一个参考点,一般都是以的font-size为基准,也即body元素的任何子元素的em值都等于font-size设置的大小。 ...CSS: body {  font-size: 14px;

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,232
精华内容 492
关键字:

csspt换算