Js中em与px的区别

em指字体高,任意浏览器的默认字体高都是16px。所以未设置的浏览器都符合: 1em=16px。那么10px=0.625em,12px=0.75em。如果你要为了简易操作,可以在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px,10px=1em,,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。em有如下特点:

1. em的值并不是固定的,随字体大小不同而变化的;

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

重写步骤:

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

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

简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是 1.2em=1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5%
* 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

欢迎大家收看我的在线Java全套免费教学超清视频:

http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html   这是其中的一个视频连接,大家可以拖动到优酷视频下方,订阅我的账号,因为以后我会有更多视频免费提供

百度搜索:输入Fcs_D调的码农 ,或者输入"胡博君"就能看到我的很多视频

或者加我的微信号:fcsboy     我可以及时通过微信通知你们

QQ学习群:237053693

时间: 2024-10-05 15:28:12

Js中em与px的区别的相关文章

【技术】css中em与px的区别

em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明body{font-size: 62.5%;},这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了.em有如下特点: 1. em的值并不是固定的: 2. e

css中em与px的区别

学习CSS了解单位em和px的区别 2007-11-14 10:12 来源:cz268.com.cn 编辑:阿小[纠错]人评论 A-A+ 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用.因为 1.IE无法调整那些使用px作为单位的字体大小: 2.国外的大部分网站能够

em与px的区别 [ 转 ]

其实,还是不大理解,为什么1em=16px:而且,还一般要在body里面,就写清楚Fone-size=62.5%,然后再让1em=10px进行使用:那么,为什么不直接在当时定义em的时候,就直接让它等于10px呢? 哈哈..不明白归不明白:使用的时候还是要照旧. css中em与px的区别 转自: http://blog.sina.com.cn/s/blog_5e7107a10100e321.html em是何物?em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1e

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

学习CSS了解单位em和px的区别 2007-11-11 20:17:25  来源:网页教学网收集整理 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用.因为 1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em作为字

JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的原型链中,是则返回true,否则返回false. 格式如下: object1.isPrototypeOf(object2); object1是一个对象的实例: object2是另一个将要检查其原型链的对象. 原型链可以用来在同一个对象类型的不同实例之间共享功能. 如果 object2 的原型链中包含

Angular.js 中 copy 赋值与 = 赋值 区别

转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.user 改变?angular.copy 和 = 号赋值有什么区别呢?新手还没有搞懂,请教各位了. <!DOCTYPE html> <html> <script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/angular

浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

var num = 1;    var str = '1';    var test = 1;    test == num  //true 相同类型 相同值    test === num //true 相同类型 相同值    test !== num //false test与num类型相同,其值也相同, 非运算肯定是false    num == str  //true 把str转换为数字,检查其是否相等.    num != str  //false == 的 非运算    num ==

js中import和require的区别

js中import和require的区别ES6标准发布后,module成为标准,标准使用是以export指令导出接口,以import引入模块.但是在我们一贯的node模块中,我们依然采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口. require它相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象.数字.字符串.函数……再把require的结果赋值给某个变量,相当于把re

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝. 我们来举个浅拷贝例子: let a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b); 嗯?明明b复