px、em、pt之间的区别与互相转换

关于px、pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之。点击查看原文(原网址已失效,这是其他站点)

这里引用的是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。

附px、em、%和pt换算表

px、em、%和pt的换算

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368741.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3.Apache ZooKeeper数据模型

1. ZooKeeper自下向上的服务视图 Apache ZooKeeper是分布式应用程序的协调服务。 它旨在解决分布式应用程序中与组件协调相关的棘手问题。 它通过暴露一个简单而强大的接口来实现这一点。 应用程序可以设计在通过ZooKeeper API实现的这些接口上,以解决分布式同步&am…

STS插件_ springsource-tool-suite插件各个历史版本

目前spring官网(http://spring.io/tools/sts/all)上可下载的spring插件只有:springsource-tool-suite-3.8.4(sts-3.8.4)。但这只针对指定的eclipse版本适用。 原贴更精彩:http://blog.csdn.net/u010203767/article/details/69211072 sts-3.8.3的下载地址…

c语言中空格的占位符,HTML空格占位符

ScrollView 里的 EditText 与输入法的用例情景是这样的: 我希望页面可以滚动,因为长页面,内容多,必须滚动来满足不同手机的显示 点击 EditText 输入法弹出来,并将布局顶起来,并且EditText有足够的显示空间 进入页面时,输入法不能 ...decltype在C中,decltype作为操作符,用于查询…

仔细看看,您会发现需要改进的地方

我建议您做一个练习:明天早上返回工作时,浏览项目的源代码,并尝试寻找重构的机会。 即使您的老板不要求也这样做。 这样做是因为您想要一些激动人心的工作时间。 重构是改变已经可以正常工作的艺术 。 但是要进行重构,您需要一个…

idea运行项目时报Error:java无效的源发行版:1.8

如果你安装的是JDK1.7,而在file->project structure中设置的是language level是8的话,就会出现这个错误提示:无效的源发行版:8。 解决办法:将语言级别改为7,或6。即语言级别不能高于你安装的版本。 另外…

0x123C语言,and esp, 0xfffffff0

问题I dont entirely understand the line with comment in it below. I read a few posts on SO and in the gcc manual and learned that it is for stack address alignment but fail to understand how it does so. The code is show below:(gdb) disas mainDump of assemb…

JUnit:在参数化测试中命名单个测试用例

几年前,我写了有关JUnit参数化测试的文章 。 我不喜欢它们的一件事是JUnit使用数字命名了单个测试用例,因此,如果它们失败,您将不知道是哪个测试参数导致了失败。 以下Eclipse屏幕快照将向您展示我的意思: 但是&#…

如何在 React Native 中写一个自定义模块

前言 在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统。提到npm,一般指两层含义:一是 Node.js 开放式模块登记和管理系统,另一种是…

小程序canvasu真机上数据图片不能使用

canvas遇到的坑 1.文字换行 2.真机不能使用网络数据图片(真坑) 点击显示效果我就不写了,你们可以自己加一下 全部代码贴出来 css#preview {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);position: fixed;z-index: 999;top: 0;ov…

c语言 两条线段位置,C++/STL实现判断平面内两条线段的位置关系代码示例

概念平面内两条线段位置关系的判定在很多领域都有着广泛的应用,比如游戏、CAD、图形处理等,而两线段交点的求解又是该算法中重要的一环。本文将尽可能用通俗的语言详细的描述一种主流且性能较高的判定算法。外积,又称叉积,是向量代…

Thunder团队Beta周贡献分规则

小组名称:Thunder 项目名称:i阅app 组长:王航 成员:李传康、翟宇豪、邹双黛、苗威、宋雨、胡佑蓉、杨梓瑞 分配规则 规则1:基础分,拿出总分的20%(8分)进行均分,剩下的80%…

SiftingAppender:将不同的线程记录到不同的日志文件中

Logback的一项新颖功能是SiftingAppender &#xff08; JavaDoc &#xff09;。 简而言之&#xff0c;它是一个代理附加器&#xff0c;它为给定运行时属性的每个唯一值创建一个子附加器。 通常&#xff0c;此属性来自MDC 。 这是基于上面链接的官方文档的示例&#xff1a; <…

gulp webpack整合

为什么需要前端工程化&#xff1f; 前端工程化的意义在于让前端这个行业由野蛮时代进化为正规军时代&#xff0c;近年来很多相关的工具和概念诞生。好奇心日报在进行前端工程化的过程中&#xff0c;主要的挑战在于解决如下问题&#xff1a;✦ 如何管理多个项目的前端代码&…

SpringBoot 入门第一章

一、前言 Spring Boot 是由 Pivotal 团队提供的全新框架&#xff0c;其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。 本系列以快速入门为主&#xff0c;可当作工具小手册阅…

C语言游戏传递小秘密,C语言的那些小秘密之链表

大多数的读者在学习编程语言的时候都不喜欢那些枯燥的文字描述&#xff0c;包括我自己在开始学习编程的时候也是这样&#xff0c;对于代码的热情远远高于文字&#xff0c;所以我在我写东西的时候也不喜欢用枯燥的文字描述来向读者讲解&#xff0c;更喜欢用代码加上适当的文字描…

【转】 VC++6.0 在Win7 64位下调试,Shift+F5无法退出

Win7 64位VC6.0调试代码无法关闭窗口解决方法  VC6.0 在64位Windows7下调试的时候&#xff0c;再结束调试&#xff0c;程序无法退出&#xff0c;只能关闭VC6.0 IDE环境。  问题描述&#xff1a;当我击F5开始一个项目的调试时&#xff0c;程序在我设置的断点处停止&#xff…

使用Infinispan创建自己的Drools和jBPM持久性

我 在这里发表的原始文章&#xff1a; 您好&#xff0c;欢迎来到我打算向您展示如何创建自己的Drools和jBPM持久性实现的帖子。 我已经为流口水对象开发了基于infinispan的持久性方案&#xff0c;并且在此过程中学到了很多东西。 如果您想做某种事情&#xff0c;我打算给您一些…

Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互

<input> 无限制输入 type 限制输入 type 如下类型 type 后还可以跟一些属性: 如<input typetext maxlength 10> 限制文本的长度为10字节 list 可以用的时候再来查, list就是当一个建议值不够的时候添加到几个. <form> <input typ…

c语言 输出音频 单片机,单片机播放WAV格式音频的理解

CSDN账号注册了3年&#xff0c;一直没有上来过&#xff0c;更不用说写博客了。我不知道博客的具体用途&#xff0c;我只想把它当做一种心得来发表&#xff0c;可能是一些技术上的理解或者生活上的小故事。好了&#xff0c;下面我将记录我对WAV播放器的理解。很久以前就看到过某…

UVALive3989 Ladies' Choice —— 稳定婚姻问题 Gale - Shapely算法

题目链接&#xff1a;https://vjudge.net/problem/UVALive-3989 题解&#xff1a; 题意&#xff1a;有n个男生和n个女生。每个女生对男神都有个好感度排行&#xff0c;同时每个男生对每个女生也有一个好感度排行。问&#xff1a;怎样配对&#xff0c;才能使的每个女生尽可能幸福…