HTML中关于字体单位的一些描述

HTML页面中,常用的有px、pt、%、em、rem

我们之前用em、百分比的时候遇到的问题就是计算,而且当嵌套的层级太多时就会非常难以把控,而用px则被固定死了,

现在我们用rem完全不用担心这个问题,因为rem的参照对象只有根节点。我们只需设置根节点的大小,所有子节点都只需参照它来设计就可以,

下面是px、em、百分比和pt的对比.

这里引用一张网络上面的对照图片,方便参照

根据上面的图表(红色部分为默认,当然不同的浏览器渲染默认值不一样,具体还需各位实测)可以看出,

我们只需设置html根元素字体大小为75%,对应的px值就是12,这样我们可以很方便的设置页面的宽高和字体大小,

当然单位是rem,这样参考对象才会永远是html而不是父元素,当需要变化的时候,只需改变html的大小其他的元素都会相应变化。

时间: 2024-12-10 15:29:38

HTML中关于字体单位的一些描述的相关文章

css字体单位

今天我们就来看一下css中的字体单位.或者你会说,不看不知道,一看吓一跳,原来css有那么多的字体单位啊,虽然有一些我们很少用,或者说没用过,但,,,它就在那里.一起去看一看吧. css中的字体单位主要分为两种类型:绝对长度单位和相对长度单位. 1.绝对长度单位:所谓绝对长度单位就是说它是一个固定值,它反映的是一个实实在在的物理尺寸,说多大就是多大,绝对长度单位不依赖于环境(显示器.分辨率.操作系统等.绝对长度单位分为以下几种: cm:厘米   mm:毫米 in:英寸(1in = 96px =7

CSS中常用的字体单位:px、em、rem和%的区别

在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: 1.px px单位名称为像素,像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取).一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割).许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站. 像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备. 2.em

css中字体单位px,pt,em ,rem,百分比之间的区别和用法

css中字体单位px,pt,em ,rem,百分比之间的区别和用法 px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了 转换公式: pt=px乘以3/4 倍数em=倍数x16px 注意:1em=16px.那么12px=0.75em,10px=0.625em.   1.em的用法 在代码重写的过程中

css中字体单位

认识这些单位 em:相对长度单位.相对于父元素.是一个可伸缩的单位. px:像素.是一个固定大小的单元. pt:点.是固定大小,不可伸缩的. %:百分比.相对于父元素.可伸缩的单位. rem:相对于根目录的em. 关联 一般来说,任意浏览器默认字体高度都是16px,而 1em=100%=16px=12pt 当不存在父级元素时默认样式: .px{font-size: 16px;} .em{font-size: 1em;} .rem{font-size: 1rem;} .pt{font-size:

关于CSS中的字体尺寸设置 em rem等

常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的固定值,即是说它们一旦设定,就不会因为其他元素的字体尺寸变化而变化. 相对单位没有一个固定的度量值,而是由父元素尺寸来决定的相对值,它们的尺寸会根据与其相关的元素改变而改变. 下面是对这些单位的一个简单整理: 单位 类型 描述 px Absolute 1个Viewport像素 pt Absolute

CSS 天坑 I - 字体单位

首先,本文所讨论的“坑”是在做回应式网页设计( Responsive Web Design 以下简称 RWD)时显现的,如果你还只是在做传统的Web设计这算不上是一个坑,因为传统的Web页面是死的,不会自动调节不能适应各类设备屏幕尺寸自然不会产生任何尺寸变化的问题.相反地,要为不同设备上的用户提供最好的阅读或使用体验我们不可避免的就是对元素或字体的尺寸的测量与控制.由其是字体的尺寸,不知道你是否有以下的经历 同样的一个网页,同一份样式表,但: 字体在mac 上很漂亮,但在windows很难看 ?

CSS -- 字体单位(px、em、rem)

web页面常用记量单位:px.em.rem: 任意浏览器的默认字体都是16px.所有未经调整的浏览器都符合: 16px = 1em = 1rem. ==>在一个CSS选择器被写入时,浏览器就有了一个“16px”大小的默认渲染字体.此时我们Web页面中的<body>就继承了这个“font-size:16px;”,除非你在CSS样式中显式的设置<body>的“font-size”值,来改变其继承的值. 1.px / em / rem 区别.优缺点 px:相对长度单位 -- 绝对值

css的字体单位

今天我们来讲一下css中最常用到的三种字体单位:px,em和rem.px是相对长度单位,它的大小是相对屏幕分辨率来说的,em和rem就不一样了,简而言之,就是它们的字体大小是由参照物来决定的.对于em,它的参照物呢,就是父级的字体,也就是说,它的大小始终是根据父级的字体大小来调整的,而rem是CSS3新增的一个相对单位,这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素.这个单位可谓集相对大小和绝对大小的优点于一

DirectX中的字体应用

1 DX中的创建字体的函数 HRESULT D3DXCreateFont( __in LPDIRECT3DDEVICE9 pDevice, __in INT Height, __in UINT Width, __in UINT Weight, __in UINT MipLevels, __in BOOL Italic, __in DWORD CharSet, __in DWORD OutputPrecision, __in DWORD Quality, __in DWORD PitchAndFa