不同屏幕尺寸设置字体大小

在响应式网站中,字体应根据屏幕的缩放而适配不同的大小,这样会带来更友好的用户体验。这篇文章就来介绍怎样在不同页面尺寸设置字体大小。

页面尺寸的三个“断点”

根据页面尺寸越大,字体越大的原则。下面以标题文字为例,在比较常用的三个不同的页面尺寸下,对标题文字大小进行不同的设置。

注意:字体的大小顺序为H1>H2>H3

手机小屏

当橙色响应条在“手机小屏”时,字体可以设置为H3。

平板电脑

当橙色响应条在“平板电脑”时,字体可以设置为H2。

一体机

当橙色响应条在“一体机”时,字体可以设置为H1。

提示:在设置过字体大小的尺寸上,响应条上会标识出一对红色的“断点”。

标题和字号

如果一段文字设置了标题大小,就无法再应用字号。想要应用字号前,应该去除标题的设置。

提示:去除标题的设置只需要在【标题】栏上单击即可。