前端开发之字体大小px,em,rem,pt
来源:互联网 发布:c语言 编译 编辑:程序博客网 时间:2024/09/21 06:37
在前端开发中尤其是响应式的开发中,字体的大小在不同的屏幕尺寸下发生变化,从而使画面更优的呈现。
下面说一下常用的字体大小的标示方式:
1:px:
这个应该是国内使用较多的单位,意思为像素。因此,其视觉的呈现效果是与分辨率相关的。例如在1024*768分辨率下看12px的字体就比960*640下看到的“小”,这里的“小”只是视觉的,其实大小是一致的。默认浏览器采用16px的呈现方式,如下:
<div class="div1">
div1 div1 div1
<div class="div2">
div2 div2 div2
<p>ppppppppp</p>
</div>
</div>
浏览器查看效果:
如果设置div2的font-size为百分数%,如120%:
2. em:
相比国内来说,国外的站点更偏向于使用em,不仅是在font-size上,在margin和padding等上面也会使用,如知名的css设计网站-css禅意花园,http://www.csszengarden.com/。1em=16px;子元素的em的大小并不是具体固定的,子元素的em是在父元素的基础上计算的,如下:
.div2{
font-size:2em;
}
p{
font-size:1em;
}
图1:
图2:
可以看到虽然元素p的大小为1em,而它的父元素div2的字体大小为2em,但计算后它们的大小是一致的,都是32px,因此em在子元素中其实是相对父元素来说的比例,此处可以理解为元素p的字体大小为div2的字体大小的1倍,如果p的字体大小为2em,则其计算的大小为64px,如下图:
.div2{
font-size:2em;
}
p{
font-size:2em;
}
图例:
如果p元素的字体大小为百分比%话,即直接在父元素的基础上乘以百分数,同px
3:rem:
rem是css3出现的新的字体大小定义方式,其与em的区别是rem总是相对于html的跟元素(html),不会相对父元素,如下:
html{
font-size:1em;
}
.div2{
font-size:2rem;
}
p{
font-size:1rem;
}
图1:
图2:
可以看到p元素的大小并不像em一样和div2的一样大,而是与html定义的1rem一样大,为16px。
如果p元素的字体大小为百分比%话,即直接在父元素的基础上乘以百分数,同px(即:如果设置百分比,都是相对父元素的)
4:pt:
pt使用的并不多,pt的效果是不随浏览器分辨率的变化而法神视觉的变化,永远看起来一样大。
- 前端开发之字体大小px,em,rem,pt
- web前端常用长度单位(px,em,rem,pt)
- 字体大小(px,em,rem)
- web开发中px\em\rem\pt区别
- px+em+rem+pt的区别
- px和em,rem,pt的区别
- px+em+pt+rpx+rem的区别
- px/pt和em/rem的差别
- WEB前端 -- px、em、rem
- 设置字体大小px、em和rem区别
- CSS中的px,em,rem设置字体大小
- Html 字体大小单位 px em pt
- Html 字体大小单位 px em pt
- css中单位px、pt、em和rem的区别
- css3大小单位px、pt、em和rem的区别
- css3大小单位px、pt、em和rem的区别
- css中单位px、pt、em和rem的区别
- css中px,em,rem,pt的区别
- openfire ofuser 密码加解密
- [数据结构]计数排序
- XMPP 协议工作流程详解
- 常用的字符串函数 strspn strcspn
- LCD 驱动过程详解
- 前端开发之字体大小px,em,rem,pt
- 类的加载器的各种方式总结
- db2安装后默认的启动服务
- 如何在android上 使用gif图片
- Android Studio配置问题总结
- Android中的Menu
- 大数据存在的价值
- UVA11234 Expressions
- Hardwood Species(利用STL中自带的排序功能编程的实验范例)