CSS中em和px单位的区别(转)

这里引用的是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手册)

任意浏览器的默认字体高都是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/wangbin/archive/2010/04/09/1707960.html

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

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

相关文章

oracle的age datetime,python cx_Oracle插入TIMESTAMP字段后显示格式问题?

目标:A张表内有个 TIMESTAMP 字段,需要读取后插入到B表中;问题:使用 cx_Oracle模块读取该字段时显示为 datetime.datetime(2016, 9, 1, 0, 0, 1, 288000) 样式;使用 executemany 方法插入B表后,再次读取B表…

.net runtime占用cpu_.net 中的StringBuilder和TextWriter区别

最近闲来之余,看了一些开源的类库,看到有些类库喜欢用TextWriter类来记录相关的字符串数据,感到比较好奇,为啥不用StringBuilder类对象。于是在网上搜索了一番,总结了相关笔记。StringBuilder类在 .net 中,字符串作为一…

微信页面弹出窗口,底部不随窗口滑动而滚动

公司是做微信第三方公众平台,有一个购物系统,现在需要将商品页面模仿淘宝的样式,就是点击购物车或购买按钮,会弹出一个窗口,显示sku和数量。本来就是一个做java后台的,前端布局不是很懂,上网搜索…

基本java,jquery异步 的级联下拉列表

第一次写博客,为了就是记录自己的学习历程,做一个整理 业务需求:有两个下拉列表,部门列表和职位列表,实现级联 1:本功能是在strut2框架下完成的,在进入页面时通过action初始化部门下拉列表 前台代码如下&am…

AE中获得datalayer所对应的data的文件路径和文件名

<summary> 获得datalayer所对应的文件路径 </summary> <param name"pDataLayer">图层</param> <param name"pFilePath">文件路径</param> <param name"pFileName">文件名</param> <re…

oracle查询100到200数据,100分数据库查询语句(ORACLE 11g)

100分求一个数据库查询语句(ORACLE 11g)一张表tabl1 如下&#xff1a;epqname createtime endtime设备1 2014.10.01 11:00:00 2014.10.01 13:22:00设备2 2014.10.27 11:00:00 2014.10.…

python向数据库中添加参数_第四篇:python操作数据库时的传参问题

python在操作数据库执行sql的时候我们经常会遇到传参问题&#xff0c;以下是我总结的几种方法&#xff1a; 1、格式化字符串 city beijing cur.execute(“SELECT * FROM %s WHERE city %s”, city) 2、使用字典传递 sql “INSERT INTO user VALUES(%(username)s, %(password…

【GIT】使用Git命令窗口将本地工程提交至远程GitHub

目标&#xff1a; 1.解决的问题是如何通过Git命令窗口将本地工程提交至GitHub。 2.方便园友的同时也方便自己以后解决此类问题。 步骤&#xff1a; 1.首先登陆GitHub网站https://github.com/ 2.新建Repository 3.新建TicketBrushSystem的Repository&#xff0c;其中红框的几处可…

制作vb dll的总结

前段时间&#xff0c;同学接了一个项目&#xff0c;在网页上显示autoCAD的图。在做项目的过程中&#xff0c;遇到一个棘手的问题。在使用vb语言开发的第三方插件中&#xff0c;有一个函数是地址传值的方式传参。想在js中调用该函数&#xff0c;但是&#xff0c;js不支持类似指针…

[ASP,VB] - 利用ASP调用API COM接口实现开关机

来源&#xff1a;http://www.111cn.net/asp/3/35f5b04c0c9f40c9f03a1b56d641ac3f.htm 服务器脚本要控制些开关机命令模式的知都要调用win api接口来实现了&#xff0c;下面我们来看一个asp调用com实例开关机功能吧。ASP通过这个组件调用系统API&#xff0c;然后按照不同的重启和…

导致oracle 控制文件坏,异常断电导致ORACLE控制文件等受到破坏的处理

故障现象&#xff1a;客户某台WINDOWS服务器掉电&#xff0c;ORACLE数据库STARTUP提示控制文件CONTROL01.CTL、CONTROL02.CTL被破坏。一、处理控制文件异常故障方法&#xff1a;直接拷贝CONTROL0一、处理控制文件异常故障二、尝试启动SQL> startup;ORACLE例程已经启动。Tota…

softmax ce loss_手写softmax和cross entropy

import 解释下给定的数据&#xff0c;x假设是fc layer的输出&#xff0c;可以看到这里x是(3,3)的&#xff0c;也就是batch_size3&#xff0c;n_classes3。但是label给出了三个数&#xff0c;取值是0&#xff0c;1&#xff0c;因此这里必须要将label先变成one_hot的形式才能在cr…

ListView中加入Button后,Button的点击事件和ListView的点击事件冲突

1.在ItemView配置的xml文件里的根节点加入属性android:descendantFocusability"blocksDescendants" 2.在要加入事件的控件上加入android:focusable"false

asp.net Session丢失问题

首先了解一下asp.net Session的实现asp.net的Session是基于HttpModule技术做的&#xff0c;HttpModule可以在请求被处理之前&#xff0c;对请求进行状态控制&#xff0c;由于Session本身就是用来做状态维护的&#xff0c;因此用HttpModule做Session是再合适不过了。原因1&#…

kafka php 0.8,php5.6 centos7 kafka0.8.1

# 首先在保证php已经正确安装的情况下&#xff1a;# 安装jdk(本人安装jdk7) 和 scala 因为kafka基于scala开发# 之后解压安装包 进入 运行命令 ./gradlew jar # 会下载一些包 # 首先运行 zookeeper ./bin/zookeeper-server-start.sh ./config/zookeeper.properties# 之后运行k…

day02(下)_运算符

首先了解java运算符的优先级和结合性: 常用转义字符表: 示例1 取余/字符串/转义字符: class operator1 {public static void main(String[] args){//取余System.out.println(-1%5);//-1System.out.println(1%-5);//1与左边的操作数同号System.out.println(3.1%2.5);//字符串:字…

activity 生命周期_如何理解安卓activity的生命周期(on-create篇)?

个人认为用类比的方式来学习新事物比较容易接受。我这里用蝴蝶的一生来做比喻。OnCreate阶段就像是蝴蝶的幼虫刚出卵里孵化出来&#xff0c;蝴蝶的一生只可能出生一次&#xff0c;oncreate只能被创建一次。蝴蝶刚出生的时候还不是蝴蝶&#xff0c;而是一只毛毛虫一样的东西&…

【十大经典数据挖掘算法】k-means

【十大经典数据挖掘算法】系列 C4.5K-MeansSVMAprioriEMPageRankAdaBoostkNNNave BayesCART1. 引言 k-means与kNN虽然都是以k打头&#xff0c;但却是两类算法——kNN为监督学习中的分类算法&#xff0c;而k-means则是非监督学习中的聚类算法&#xff1b;二者相同之处&#xff1…

php strstr 效率,PHP中的stristr(),strstr(),strpos()速度比较

测速代码:function getmicrotime(){list($usec, $sec) explode(" ",microtime());return ((float)$usec (float)$sec);}$time_start getmicrotime();$string"xxxddxx";$find"d";for ($i0;$i<300000;$i){if (stristr($string,$find))//if (…

ajax获取数据用弹窗显示_Vue之 点击返回弹出推荐商品弹窗

阅读本文约需要5分钟大家好&#xff0c;我是你们的导师&#xff0c;我每天都会在这里给大家分享一些干货内容(当然了&#xff0c;周末也要允许老师休息一下哈)。上次老师跟大家分享了VUE 之 v-on指令的知识&#xff0c;今天跟大家分享下Vue之 点击返回弹出推荐商品弹窗的知识。…