在设计页面字体的时候,我们通常选择的是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,它们都是用来定义元素尺寸的重要工具,但各有其特点和应用场景。 首先,我们要理解像素(px)单位。像素是屏幕上的最小显示单位,通常用于创建精确的布局。当你设置一个...
在众多单位中,`px`(像素)和`em`是两种最常见的长度单位,它们各自拥有独特的特性和应用场景,理解它们之间的区别对前端开发者来说尤为重要。 ### `px`单位解析 `px`,全称为pixel,中文翻译为“像素”,是最...
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?下面给大家详细介绍下。 PX特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的...
### CSS 弹性布局 px和em值转换表详解 在前端开发中,特别是在CSS布局设计时,经常需要用到单位之间的转换,比如将像素单位(px)转换为相对单位(em)。这样的转换有助于实现响应式布局和更灵活的设计。本文将详细介绍...
相信每位前端工程师们都有这么一个体会,国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,...下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别,需要的朋友可以参考借鉴,下面来一起看看吧。
在CSS布局和样式设计中,字体大小的设置是非常关键的一部分,通常我们会使用px、em或rem作为单位。这些单位各有特点,适用于不同的场景。下面将详细介绍它们的区别以及使用策略。 首先,px(像素)是最常见的长度...
`postcss-px2rem` 是一个非常实用的开源库,它是基于 PostCSS 的插件,主要用于将 CSS 文件中的像素单位(px)自动转换为相对单位(rem)。PostCSS 是一个工具,它允许开发者通过编写自定义的JavaScript 插件来处理...
在CSS布局和样式设计中,理解像素(px)和em单位的区别是非常重要的,因为它们直接影响到网页的可读性和响应性。下面将详细解释px和em单位,并探讨它们在实际应用中的差异。 首先,像素(px)是绝对单位,代表显示器上...
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位,它基于屏幕的物理分辨率。1px表示设备上的一点,通常用于创建精确的图形或保持元素大小恒定。由于px是...
`postcss-px2rem`是一个PostCSS插件,它的主要任务就是自动将CSS文件中的`px`单位转换为`rem`。PostCSS是一个工具,它可以解析、修改、然后生成CSS,允许开发者使用未来CSS语法,或者像`px2rem`这样的自定义转换。在...
之前听人说过,网站制作中字体单位应该用em而不用px,原因简单来...为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只
本文将详细解析三种常见的CSS字体单位——像素(px)、em和rem的区别及其应用场景。 首先,像素(Pixel,px)是绝对长度单位,它基于显示器的物理像素。在大多数情况下,px 提供了一种稳定且可预测的布局,但有一个...
【CSS中的EM单位详解】 EM单位在CSS中是一种非常强大的相对单位,它的主要特点是基于父元素的字体大小来计算元素的尺寸。这篇文章将深入探讨EM单位的使用,以及如何利用它构建灵活的弹性布局。 首先,我们要理解...
概念介绍: 1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,...通常1em=16px。 3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸),
我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为 1. IE无法调整那些使用px作为单位的字体大小;...
我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为 1、IE无法调整那些使用px作为单位的字体大小...
postcss-pxtorem 的插件,可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位(观点)。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...