Skip to content

Web Response Design

Font Size

  1. 将根字体大小设置为 62.5%

所有浏览器中的默认字体大小通常约为 16 像素。常见的做法是将根字体大小设置为 62.5%,这会将默认的 16px 转换为大约 10px。我们这样做是为了在使用 em 或 rem 时更容易在心理上转换字体大小(例如 1 rem = 约 10 像素,而 1.8 rem = 约 18 像素)。这是一种方便的方法,原因有二:

The mental conversion between pixels and rem is easy to calculate in your head. 像素和 rem 之间的心理转换很容易在你的头脑中计算出来。

A user can change their preferred default font size and the website would adjust automatically to suit their needs. 用户可以更改他们喜欢的默认字体大小,网站会自动调整以满足他们的需求。

Do not be obsessed with the F-shape pattern. While on desktop versions, it rules the roost, when it comes to small screens like cell-phones, it is useless. People prefer exploring interfaces in other ways. As a rule, mobile users look at the center of the screen first. It is also the easiest place for them to reach. Therefore, the most critical information, including CTAs and navigation, should be there. However, when it comes to tablets and mid-sized devices, the screen’s central part is not easy to reach. Here you need to place navigation and crucial details on sides. 不要迷恋F型图案。在桌面版本上,它占据主导地位,但在手机等小屏幕上,它就没用了。人们更喜欢以其他方式探索界面。通常,移动用户首先看屏幕的中心。这也是他们最容易到达的地方。因此,最关键的信息(包括 CTA 和导航)应该在那里。然而,对于平板电脑和中型设备来说,屏幕的中央部分并不容易到达。在这里,您需要将导航和关键细节放在侧面。

References