详解CSS中单位PX和EM,REM的区别PX特点EM特点 REM特点

这篇具有很好参考价值的文章主要介绍了详解CSS中单位PX和EM,REM的区别PX特点EM特点 REM特点。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?

PX特点

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

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

  3. Firefox能够调整px和em,rem,但是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。

REM特点

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个例子:

p {font-size:14px; font-size:.875rem;}

注意:

选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

在这里为大家提供一个px,em,rem单位转换工具

地址:http://pxtoem.com/

学习更多css知识关注CRMEB.文章来源地址https://www.toymoban.com/news/detail-593678.html

到了这里,关于详解CSS中单位PX和EM,REM的区别PX特点EM特点 REM特点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML中的单位rem和em有什么区别?

    在HTML和CSS设计中, rem 和 em 都是相对单位,用于定义字体大小、间距和其他尺寸。它们之间的主要区别在于相对于什么来计算大小。 在排版和印刷领域,“em” 被用来表示字体大小的相对测量,指的是当前字体大小的倍数,因此它可以被视为 “例如” 一个倍数。例如,“

    2024年02月09日
    浏览(34)
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(49)
  • CSS—相对单位rem

    rem是一个相对长度单位,它的单位长度取决于根标签html的字体尺寸。rem即root em的意思,中文翻译为根em。浏览器的文本尺寸一般默认为16px,即默认情况下: rem布局原理:根据CSS媒体查询功能,更改根标签的字体尺寸,实现rem单位随屏幕尺寸的变化,如下代码所示 注意,一般

    2023年04月19日
    浏览(39)
  • 【CSS】em单位的理解

    1、em单位的定义 MDN的解释:它是相对于父元素的字体大小的一个单位。 例如:父元素font-size:16px;子元素的font-size:2em(也就是32px) 注:有一个误区,虽然他是一个相对单位,并且官方对它的解释是相对于父元素字体大小的一个单位,但是它是放在了文字属性里面,也就

    2024年02月11日
    浏览(39)
  • css基础知识十九:让Chrome支持小于12px 的文字方式有哪些?区别?

    一、背景 Chrome 中文版浏览器会默认设定页面的最小字号是12px,英文版没有限制 原由 Chrome 团队认为汉字小于12px就会增加识别难度 中文版浏览器 与网页语言无关,取决于用户在Chrome的设置里(chrome://settings/languages)把哪种语言设置为默认显示语言 系统级最小字号 浏览器默

    2024年02月15日
    浏览(39)
  • 【CSS】CSS 常用单位

    大小单位: px 。 字体相对单位: em 、 rem ;根据 [font-size] 进行计算。 视窗相对单位: vm 、 vh 、 vmax 、 vmin ;根据 [视窗大小] 进行计算。 em :相对于元素本身的 font-size 值。如果元素本身没有设置 font-size ,会继承父元素的 font-size 。 rem :相对于根元素( html 元素)的 f

    2024年02月13日
    浏览(50)
  • CSS构建基础(一)CSS值和单位

    **CSS中使用的每个属性都有一个值类型,定义该属性允许的值集。**查看MDN上的任何属性页将帮助您理解与值类型相关联的值,这些值类型对任何特定属性都有效。 本节课我们将学习一些最常用的值类型,以及它们最常用的值和单位。 在CSS规范和MDN上的属性页中, 您将能够发

    2024年02月09日
    浏览(35)
  • CSS图片下方4px间距

    图片下方有4px间距。 图片下方是图片时问题也存在。 图片设置 display: block; 图片设置 vertical-align: middle; 或 vertical-align: bottom; 图片父级设置 font-size: 0; 以上。

    2024年02月06日
    浏览(41)
  • CSS常见单位汇总

    像素(px): 绝对单位,以屏幕上的实际像素为基准,最常用于具体的尺寸和位置表示。 百分比(%): 相对单位,基于父元素的属性计算大小,如宽度、高度、边距等。 自适应单位(em): 相对单位,相对于当前元素的字体大小,1em 等于当前元素的字体大小。 根元素单位

    2024年02月12日
    浏览(36)
  • CSS中有哪些单位?

    CSS中有多种单位可用于指定尺寸、长度、角度等值。 下面是一些常见的CSS单位: 1. px (pixels):像素单位,是相对于屏幕上的单个像素点的长度单位。 2. % (percentage):百分比单位,相对于父元素的特定属性的值进行计算。例如,width: 50% 表示元素宽度为父元素宽度的50%。 3. em:

    2024年02月15日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包