概念介绍:
1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。
2、em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。
3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
4、rem(root em,根em):是CSS3新增的一个相对单位,这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
1、em与px的问题
px是何物?
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
PX特点
1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
em是何物?
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特点:
1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。因此,12px = 0.75em。实际应用中为了方便换算,通常会如下设置样式:
CSS代码
html { font-size: 62.5%; }
这样,1em = 10px。我们常用的1.2em理论上就是12px。但是,这个换算在IE浏览器下不成立,1.2em会比12px稍大一些,解决办法是把html标签样式中的62.5%改成63%,即:
CSS代码
html { font-size: 63%; }
在 中文的文章中,一般会在段首空两格。如果用px作为单位,对12px字体来说需要空出24px,对14px字体来说需要空出28px……这样换算非常不通 用。如果用上em单位,这个问题就很好解决了,1个字的大小就是1em,那两个字的大小就是2em。因此,只需这样定义就行了:
CSS代码
p { text-indent: 2em; }
em和px两种字体单位的区别
字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。
我在调整本blog的时候,发现不仅仅是字体,将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。
em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
em重写步骤:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
简 单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级 元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
IE中的12px汉字:
完成 em转换时还发现了一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而 是稍大一点。你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有 限。本现象只发生在12px的汉字,英文不存在此现象。解决方法就是把style.css中的62.5%换 为63%。
一个px、em、pt单位转换工具:
2、rem特点
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
举例:
p {font-size:14px; font-size:.875rem;}
注意:
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
3、字体换算表
字号 |
pt |
px |
em |
初号 |
42pt |
56px |
3.5em |
小初 |
36pt |
48px |
3em |
|
34pt |
45px |
2.75em |
|
32pt |
42px |
2.55em |
|
30pt |
40px |
2.45em |
|
29pt |
38px |
2.35em |
|
28pt |
37px |
2.3em |
|
27pt |
36px |
2.25em |
一号 |
26pt |
35px |
2.2em |
|
25pt |
34px |
2.125em |
小一 |
24pt |
32px |
2em |
二号 |
22pt |
29px |
1.8em |
|
20pt |
26px |
1.6em |
小二 |
18pt |
24px |
1.5em |
|
17pt |
23px |
1.45em |
三号 |
16pt |
22px |
1.4em |
小三 |
15pt |
21px |
1.3em |
|
14.5pt |
20px |
1.25em |
四号 |
14pt |
19px |
1.2em |
|
13.5pt |
18px |
1.125em |
|
13pt |
17px |
1.05em |
小四 |
12pt |
16px |
1em |
|
11pt |
15px |
0.95em |
五号 |
10.5pt |
14px |
0.875em |
|
10pt |
13px |
0.8em |
小五 |
9pt |
12px |
0.75em |
|
8pt |
11px |
0.7em |
六号 |
7.5pt |
10px |
0.625em |
|
7pt |
9px |
0.55em |
小六 |
6.5pt |
8px |
0.5em |
七号 |
5.5pt |
7px |
0.4375em |
八号 |
5pt |
6px |
0.375em |
相关推荐
首先,我们应该用NPM来安装postcss-px2rem npm i postcss-plugin-px2rem --save -dev 然后我们需要在vue.config.js中创建一个配置。由于在vue-cli3.X中。去掉了build和config文件夹。所有的配置都放到了vue.config....
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位,它基于屏幕的物理分辨率。1px表示设备上的一点,通常用于创建精确的图形或保持元素大小恒定。由于px是...
// 设计稿以1920px为宽度,而我把页面宽度设计为10rem的情况下 const baseSize = 192; // 这个是设计稿中1rem的大小。 function setRem() { // 实际设备页面宽度和设计稿的比值 const scale = document.documentE
概念介绍: 1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,...通常1em=16px。 3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸),
【 vantUI CSS 文件 H5 自适应 REM 处理项目详解】 该项目主要关注的是在 H5 页面开发中,如何利用 vantUI 的 CSS 文件并结合 REM 单位实现自适应布局。REM(Relative Em Unit)是一种相对单位,以根元素(通常是 ...
因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem。要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量。...$ cnpm i postcss-px2rem --save $
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。...
然后,我们需要在`package.json`的`postcss`配置中添加`postcss-px2rem`,并设定`remUnit`的值,例如,将1px转换为26.7rem: ```json { "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { ...
在开发react项目时,很多时候我们把style写在css、less、scss里,经过像postcss这样的配置处理,但有没有这样一种需求呢,像有些样式我们直接写在xml标签上style里,然后也能进行处理,如px2rem能将px转rem,是否在...
- 相对单位:如 `em`(相对于父元素字体大小)、`ex`(相对于当前元素的小写字母高度)、`rem`(相对于根元素字体大小)。 - 绝对单位:如 `px`、`pt`、`in`、`cm`、`mm`。 - 关键字:如 `xx-small`, `x-small`, `...
前言 ...calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算。 标准的写法: .class{ /* area: expression; */
书中会介绍绝对单位(如px、pt)和相对单位(如em、rem、vh、vw),以及百分比单位和新引入的CSS长度单位,如fr(用于Grid布局)。理解不同单位的用途和相互关系,有助于在不同场景下选择合适的单位进行尺寸定义。 ...
10. **CSS单位**:包括绝对单位(如 `px`)和相对单位(如 `%`, `em`, `rem`)。 在前端笔记中,你可能会找到关于这些概念的更深入讲解,包括实例和最佳实践,帮助你更好地理解和应用HTML和CSS。学习并熟练掌握这两...
**rem适配布局详解** 随着手机型号的多样化,前端开发者面临着如何实现跨设备自适应布局的挑战。在这样的背景下,`rem`单位应运而生,成为解决这一问题的关键技术。`rem`(root em)是一种相对单位,它基于根元素...
例如,如果设计稿中某元素宽度为200px,在CSS中应写为`2rem`,这样元素的宽度会随`<html>`的`font-size`自动调整。 3. **处理字体单位**:设计稿中的字体通常使用px单位,但为了在不同设备上保持一致的视觉效果,...
`font-size`属性用于设置元素的字体大小,可以通过像素、百分比、em、rem等单位指定。 #### CSS haslayout 详解 `hasLayout`是IE特有的行为,触发条件复杂,通常用于解决IE特定的布局问题,但随着现代浏览器的发展...
### 移动端适配解决方案:rem与vw详解 #### 一、引言 随着移动互联网的迅速发展,用户越来越依赖于移动设备访问网站或应用。为了提供良好的用户体验,前端开发者需要确保页面能够适应不同尺寸的屏幕。在众多适配...