`

CSS中px和em的区别

    博客分类:
  • CSS
阅读更多

在设计页面字体的时候,我们通常选择的是px而不是em。在国内,无论是哪种类型的网站,大到新浪、搜狐小到一些个人站点都是这么做的。不为别的,就是因为他易用。而国外的网站则基本上都采用em作为字体的单位,他们考虑到的是网站的可扩展性。这样一来,网站的维护也就相对简单些。要改大或改小某些字体就不会影响到页面的整体布局。前者就很有可能出项布局错乱的现象。

文字的单位建议用px,块与块之间的单位用px。

首先,em不是固定的,它会继承父级元素的字体大小。雅虎的Yahoo fonts CSS 建议字体大小都用%表示,他们提供了一张px和%相互转换的表:

  • 10px => 77%
  • 11px => 85%
  • 12px => 93% (was 93)
  • 13px => 100%
  • 14px => 108% (was 107)
  • 15px => 116% (was 114)
  • 16px => 123.1% (was 122)
  • 17px => 131% (was 129)
  • 18px => 138.5% (was 136)
  • 19px => 146.5% (was 144)
  • 20px => 153.9% (was 152)
  • 21px => 161.6% (was 159)
  • 22px => 167%
  • 23px => 174%
  • 24px => 182%
  • 25px => 189%
  • 26px => 197%
分享到:
评论

相关推荐

    CSS3 px 和 em 和 rem

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

    css中单位px和em的区别

    在众多单位中,`px`(像素)和`em`是两种最常见的长度单位,它们各自拥有独特的特性和应用场景,理解它们之间的区别对前端开发者来说尤为重要。 ### `px`单位解析 `px`,全称为pixel,中文翻译为“像素”,是最...

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

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

    CSS 弹性布局 px和em值转换表

    ### CSS 弹性布局 px和em值转换表详解 在前端开发中,特别是在CSS布局设计时,经常需要用到单位之间的转换,比如将像素单位(px)转换为相对单位(em)。这样的转换有助于实现响应式布局和更灵活的设计。本文将详细介绍...

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

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

    CSS中px em rem区别与使用

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

    前端开源库-postcss-px2rem

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

    CSS中单位px与em的区别(推荐)

    在CSS布局和样式设计中,理解像素(px)和em单位的区别是非常重要的,因为它们直接影响到网页的可读性和响应性。下面将详细解释px和em单位,并探讨它们在实际应用中的差异。 首先,像素(px)是绝对单位,代表显示器上...

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

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

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

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

    css中em px 区别你真的了解吗

    之前听人说过,网站制作中字体单位应该用em而不用px,原因简单来...为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只

    px、em、rem区别1

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

    CSS中强大的EM,css的em属性学习全攻略.pdf

    【CSS中的EM单位详解】 EM单位在CSS中是一种非常强大的相对单位,它的主要特点是基于父元素的字体大小来计算元素的尺寸。这篇文章将深入探讨EM单位的使用,以及如何利用它构建灵活的弹性布局。 首先,我们要理解...

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

    概念介绍: 1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,...通常1em=16px。 3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸),

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

    我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为 1. IE无法调整那些使用px作为单位的字体大小;...

    搞清楚CSS中单位px与em之间的关系和特点

    我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为 1、IE无法调整那些使用px作为单位的字体大小...

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

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

Global site tag (gtag.js) - Google Analytics