css:学习CSS了解单位em和px的区别

在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因为有一部法律来约束他们—例如美国的Section 508,强制网站达到一定的易用性。

      关键点:

 1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网

站能够调整的原因在于其使用了em作为字体单位;

  3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

  px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

  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%;

  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处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释

转载于:https://www.cnblogs.com/HughTan/archive/2010/04/12/1709972.html

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

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

相关文章

外汇游乐场

介绍 F X Playground是基于JavaFX的原型制作工具或实时编辑器,它消除了编译Java代码的步骤。 这个概念并不是什么新鲜事物,例如在网络世界中,有许多HTML5 游乐场提供在线编辑器,使开发人员可以快速原型化或尝试各种JavaScript库。…

轻轻松松看懂Spring AOP源码

轻轻松松看懂Spring AOP源码 https://baijiahao.baidu.com/s?id1596466083334197175&wfrspider&forpc 如果对spring的核心容器和JDK动态代理、CGLIB有所了解,接下来再看spring AOP源码会比较容易。文中所有代码片段截图对应的spring版本是5.0。 本文内容曾…

2015年,Web 进入移动时代

最近 Morgan Stanley 发布了一份87页的报告,对 Internet 的未来趋势进行预测,报告显示,移动 Web 目前发展迅猛,包括 Kindle, iPhone, 智能手机,平板电脑,GPS 设备,游戏机在内的无线设备呈爆炸式…

vue2.0移除或更改的一些东西

一、vue2.0移除了$index和$key 虽然说现在很多文章说他们的代码是vue2.0版本的,但是有一些仔细一看,发现并不全是2.0版本,有些语法还是1.0的版本,比如这个$index,$key,这两个压根就不是2.0的写法,2.0早就把…

VGG16等keras预训练权重文件的下载及本地存放

VGG16等keras预训练权重文件的下载: https://github.com/fchollet/deep-learning-models/releases/ .h5文件本地存放目录: Linux下是放在“~/.keras/models/”中 Win下则放在Python的“settings/.keras/models/”中 在anaconda on win中默认是&#xff1…

Java Keystore教程

目录 1.简介 2. SSL及其工作方式 3.私钥 4.公开证书 5.根证书 6.证书颁发机构 7.证书链 8.使用Java keytool的密钥库 9.密钥库命令 10.在Apache Tomcat上使用密钥库和自签名证书配置SSL 1.简介 我们谁没有去ebay,亚马逊买东西或他的个人银行帐户来检查。 您是否认为…

spring AOP源码分析(一)

spring AOP源码分析(一) 对于springAOP的源码分析,我打算分三部分来讲解:1.配置文件的解析,解析为BeanDefination和其他信息然后注册到BeanFactory中;2.为目标对象配置增强行为以及代理对象的生成&#xff…

异或前缀和,组合数学——cf1054D

/* 每个异或前缀和sum[i]只有两个值 区间异或和不为0,即两个不相等的前缀和 sum[i]的两个前缀和只要标记一个就可以了,为了去重只用map保存最小的那个来计数 最后统计相同的前缀和时,为了使相同的最小,每个map的值要平分 */ #inc…

elementUI之switch应用的坑

前言: 因为项目中用到了饿了么出品的element-ui这一套ui框架,所以很多地方都踩在了坑里,前面碰到了一些,今天着重聊一下switch这个组件。 首先switch接受Boolean类型的数据,莫非是true和false。 对switch进行赋值&a…

C# 反射机制(转)

1、 什么是反射2、 命名空间与装配件的关系3、 运行期得到类型信息有什么用4、 如何使用反射获取类型5、 如何根据类型来动态创建对象6、 如何获取方法以及动态调用方法7、 动态创建委托 1、什么是反射 Reflection,中文翻译为反射。 这是.Net中获取运…

《软件工程导论》课后习题解答

来源:https://blog.csdn.net/Rong_Toa/article/details/80771976 第一章 软件工程概论 1.什么是软件危机? 软件危机是指在计算机软件的开发和维护过程中所遇到的一系列严重问题。这些问题表现在以下几个方面: (1)用户对开发出的软…

attr和prop的区别以及在企业开发中应该如何抉择

attr和prop有很多相同的地方,比如都可以操作标签的属性节点,而且获取的时候都只可以获取到相同节点的第一个,例如这样: $(span).attr(class);和$(span).prop(class);都只能返回第一个span的class 同理做属性的修改和添加,删除也都…

从n个数里面找最大的两个数理论最少需要比较

答案是:nlogn-2 过程是这样的:甲乙比甲胜出,丙丁比丙胜出,最后甲丙比较,甲胜出。。。容易得出找出最大数为n-1次。现在开始找出第二大的数字:明显,第二大的数字,一定和甲进行过比较。…

Java抽象– ULTIMATE教程(PDF下载)

编者注 :在本文中,我们提供了Java教程中的全面抽象。 抽象发生在类级别的设计中,目的是隐藏实现API /设计/系统提供的功能的方式的实现复杂性,从某种意义上讲简化了访问底层实现的“接口”。 此过程可以在越来越“更高”的抽象层次…

Entity Data Model (EDM) 深入分析, Part 3

EntityClient 实体框架(Entity Framework)在ADO.NET 3.5 提供程序的基础上引入新的 ADO.NET 提供程序 EntityClient。Entity-Client 看上去与之前使用的 ADO.NET 提供程序非常类似,它将提供第一个抽象,可允许开发人员使用标准的 C…

用递归方式判断字符串是否是回文

题目要求:使用递归方式判断某个字串是否是回文( palindrome )回文”是指正着读、反着读都一样的句子。比如“我是谁是我” 设计思想:首先能实现可输出任意字符串,然后定义返回值数据类型,判断递归结束条件的…

Vue.js 相关知识(动画)

1. 简介 Vue 在插入、更新或移除 DOM 时&#xff0c;提供多种不同方式的过渡效果&#xff0c;并提供 transition 组件来实现动画效果&#xff08;用 transition 组件将需执行过渡效果的元素包裹&#xff09; 语法&#xff1a;<transition name””>元素或组件&#xff…

三个水桶等分8升水的问题

目录 智力题目答案问题分析程序代码&#xff08;PHP&#xff09;运行结果小结推荐阅读智力题目 有三个容积分别为3升、5升、8升的水桶&#xff0c;其中容积为8升的水桶中装满了水&#xff0c;容积为3升和容积为5升的水桶都是空的。三个水桶都没有刻度&#xff0c;现在需要将大水…

Maven Git发布

在开始这篇文章之前&#xff0c;我需要指出我在去年才开始认真地与Git合作 。 不幸的是&#xff0c;我从事的许多项目仍在使用SVN或CVS&#xff0c;但现在我终于开始使用Git了 。 在过去的几年中&#xff0c;我使用Maven Release Plugin完成了许多软件发行。 我仍然记得我花了…

sqlserver 多表更新

sqlserver 多表更新 update bi_user_organization set bi_user_organization.bi_organization_id b.id frombi_user_organization a, bi_organization_structure b where a.teamb.name 转载于:https://www.cnblogs.com/handsome1013/p/11594075.html