广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >CSS中的单位px与em有什么区别
  • 426
分享到

CSS中的单位px与em有什么区别

2024-04-02 19:04:59 426人浏览 独家记忆
摘要

这篇文章主要讲解了“CSS中的单位px与em有什么区别”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中的单位px与em有什么区别”吧!用px来定义字体

这篇文章主要讲解了“CSS中的单位px与em有什么区别”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中的单位px与em有什么区别”吧!

用px来定义字体,无法用浏览器字体放大功能,而国外大多数网站可以在IE浏览器中使用。

原因:

  1.IE无法调整px为单位的字体大小。

  2.国外大部分使用em为字体单位。

px,em都为相对长度单位,

  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会继承父级元素的字体大小。

因此需要强调:

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

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

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

注意事项:

  用以上方法的得到的12px(1.2em)汉字,在IE中并不等于直接用12px定义的字体大小,而是稍大一些。

  需要在body选择器中把62.5%换成63%就能正常显示了。

  原因可能是IE处理汉字时,对浮点的取值精确度有限。

感谢各位的阅读,以上就是“CSS中的单位px与em有什么区别”的内容了,经过本文的学习后,相信大家对CSS中的单位px与em有什么区别这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: CSS中的单位px与em有什么区别

本文链接: https://www.lsjlt.com/news/77834.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS中的单位px与em有什么区别
    这篇文章主要讲解了“CSS中的单位px与em有什么区别”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中的单位px与em有什么区别”吧!用px来定义字体...
    99+
    2022-10-19
  • CSS中单位px和em的区别是什么
    本篇内容介绍了“CSS中单位px和em的区别是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!彻底弄懂C...
    99+
    2022-10-19
  • css中px和em,rem单位的区别是什么
    这篇文章主要讲解了“css中px和em,rem单位的区别是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css中px和em,rem单位的区别是什么”吧!...
    99+
    2022-10-19
  • css单位中px和em以及rem的区别是什么
    这篇文章主要介绍“css单位中px和em以及rem的区别是什么”,在日常操作中,相信很多人在css单位中px和em以及rem的区别是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2022-10-19
  • CSS中单位px和em以及rem的区别是什么
    CSS中单位px和em以及rem的区别是什么,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。国内的设计师大都喜欢用px,而国外的网站大都喜欢用e...
    99+
    2022-10-19
  • CSS中px、em、rem、%、vw、vh单位之间的区别是什么
    这篇文章将为大家详细讲解有关CSS中px、em、rem、%、vw、vh单位之间的区别是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1 、pxpx就是pixel(像素)的缩写,相对长度单位,相对于屏幕...
    99+
    2023-06-08
  • CSS中单位px、rem、em、vh、vw之间的区别有哪些
    这篇文章将为大家详细讲解有关CSS中单位px、rem、em、vh、vw之间的区别有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。绝对长度pxpx是像素值,是一个固定的长度,比如我们的米,厘米一样。相对...
    99+
    2023-06-08
  • css中px、em和rem的有哪些区别
    小编给大家分享一下css中px、em和rem的有哪些区别,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言em 和 rem 都是...
    99+
    2022-10-19
  • CSS中px和em属性的区别是什么
    这篇文章给大家介绍CSS中px和em属性的区别是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在...
    99+
    2022-10-19
  • CSS中单位px与em之间的关系和特点是什么
    这篇文章主要介绍“CSS中单位px与em之间的关系和特点是什么”,在日常操作中,相信很多人在CSS中单位px与em之间的关系和特点是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2022-10-19
  • CSS的em、px、pt长度单位怎么转换
    这篇文章主要讲解了“CSS的em、px、pt长度单位怎么转换”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS的em、px、pt长度单位怎么转换”吧! ...
    99+
    2022-10-19
  • CSS的字体单位px,em,rem和%怎么用
    这篇文章主要介绍“CSS的字体单位px,em,rem和%怎么用”,在日常操作中,相信很多人在CSS的字体单位px,em,rem和%怎么用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2022-10-19
  • html5中px和em的区别有哪些
    本篇内容主要讲解“html5中px和em的区别有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html5中px和em的区别有哪些”吧! ...
    99+
    2022-10-19
  • css样式中单位百分比和px的区别有哪些
    这篇文章主要介绍了css样式中单位百分比和px的区别有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 区别:...
    99+
    2022-10-19
  • HTML中px、em、pt长度单位的含义是什么
    本篇内容介绍了“HTML中px、em、pt长度单位的含义是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2022-10-19
  • css中px指的是什么单位
    这篇文章主要介绍css中px指的是什么单位,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 在css中,px全称pixel,中文意思为“像素”,是计算机系统...
    99+
    2022-10-19
  • css中的em单位怎么用
    小编给大家分享一下css中的em单位怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!     css长度单位之em单位     em是相对字...
    99+
    2022-10-19
  • css中px和pt的区别有哪些
    这篇文章主要介绍了css中px和pt的区别有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 区别:pt是绝对...
    99+
    2022-10-19
  • CSS中不同单位的区别是什么
    这篇文章主要介绍了CSS中不同单位的区别是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 CSS中不同单位 1.px px(Pix...
    99+
    2022-10-19
  • css3中em指的是什么单位
    小编给大家分享一下css3中em指的是什么单位,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 在css3中,em是一个相对长度单位,相对于当前对象内文本的字体尺...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作