`
沐疯-
  • 浏览: 12882 次
  • 性别: Icon_minigender_1
  • 来自: 山东
社区版块
存档分类
最新评论

彻底弄懂css中单位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设定的字体大小。下面就是

 

 

 

一个例子:

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

注意: 

 

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

 

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

地址:http://pxtoem.com/

 

 

 

 

  • 大小: 69.4 KB
  • 大小: 72.8 KB
分享到:
评论

相关推荐

    知识普及:彻底搞懂CSS中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?下面给大家详细介绍下。 PX特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的...

    CSS3 px 和 em 和 rem

    本文将深入探讨CSS3中的单位px、em和rem,它们都是用来定义元素尺寸的重要工具,但各有其特点和应用场景。 首先,我们要理解像素(px)单位。像素是屏幕上的最小显示单位,通常用于创建精确的布局。当你设置一个...

    前端开源库-postcss-px2rem

    `postcss-px2rem` 是一个非常实用的开源库,它是基于 PostCSS 的插件,主要用于将 CSS 文件中的像素单位(px)自动转换为相对单位(rem)。PostCSS 是一个工具,它允许开发者通过编写自定义的JavaScript 插件来处理...

    使用postcss-px2rem插件把px转变为rem,并配合给html根元素设置fontsize,来实现页面的自适应效果

    `postcss-px2rem`是一个PostCSS插件,它的主要任务就是自动将CSS文件中的`px`单位转换为`rem`。PostCSS是一个工具,它可以解析、修改、然后生成CSS,允许开发者使用未来CSS语法,或者像`px2rem`这样的自定义转换。在...

    postcss-pxtorem:使用PostCSS将像素单位转换为rem(根em)单位

    postcss-pxtorem 的插件,可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位(观点)。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...

    css中px、em和rem的区别总结

    相信每位前端工程师们都有这么一个体会,国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,...下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别,需要的朋友可以参考借鉴,下面来一起看看吧。

    vue px自动转rem 架子

    在“vue px自动转rem 架子”中,我们关注的是如何在Vue项目中实现像素单位(px)到相对单位(rem)的自动化转换。这在移动端开发中尤其重要,因为rem单位可以让我们更容易地实现页面的自适应布局,特别是在不同屏幕...

    CSS 中px、em、rem、%、vw、vh单位之间的区别详解

    本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位,它基于屏幕的物理分辨率。1px表示设备上的一点,通常用于创建精确的图形或保持元素大小恒定。由于px是...

    px、em、rem区别1

    本文将详细解析三种常见的CSS字体单位——像素(px)、em和rem的区别及其应用场景。 首先,像素(Pixel,px)是绝对长度单位,它基于显示器的物理像素。在大多数情况下,px 提供了一种稳定且可预测的布局,但有一个...

    Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

    而`px2rem-loader`和`postcss-plugin-px2rem`则是在编译阶段自动将CSS中的px转换为rem,简化开发者工作。 需要注意的是,当使用预处理语言时,`px2rem-loader`可能无法处理嵌套规则或某些特定情况,这时`postcss-...

    CSS中px em rem区别与使用

    在CSS布局和样式设计中,字体大小的设置是非常关键的一部分,通常我们会使用px、em或rem作为单位。这些单位各有特点,适用于不同的场景。下面将详细介绍它们的区别以及使用策略。 首先,px(像素)是最常见的长度...

    css中的px、em、rem、pt 特点和区别及换算详解

    1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,...

    浅析CSS中单位px、rem、em、vh、vw之间的区别

    本文将深入探讨CSS中五个常用的长度单位:px、rem、em、vh和vw,以及它们之间的差异。 1. **像素单位px**: 像素px是最基础的单位,它是一个固定的长度单位,类似于物理世界中的米或厘米。在屏幕上,1px代表显示器...

    一款px转换rem工具

    在前端开发中,像素(px)是常用的布局单位,但为了实现响应式设计,开发者往往需要将像素值转换为相对单位,如rem(root em)。rem单位与根元素(通常是html元素)的字体大小相关联,允许页面元素的尺寸根据屏幕...

    CSS px,rem关系转换换算

    懒人推动进步,简化px,em,rem的换算

Global site tag (gtag.js) - Google Analytics