基本字体大小与移动设备

Posted

技术标签:

【中文标题】基本字体大小与移动设备【英文标题】:Base font size vs. mobile devices 【发布时间】:2012-07-02 15:50:03 【问题描述】:

关注这些文章:

CSS font-size: em vs. px vs. pt vs. percent

16 Pixels For Body Copy. Anything Less Is A Costly Mistake

我将使用以下基本尺寸:

body 
    font-size: 100%;

并将其用作基本段落字体大小,导致 - 在桌面上 - 16px,除非用户更改其浏览器或系统设置。


该网站的布局是响应式的,我也担心它在移动设备上的外观 - 包括小型智能手机和高 DPI 显示器。

如果我只指定100%,这在移动设备上会产生什么结果? 我可以期望浏览器为给定的屏幕尺寸和 DPI 选择最佳字体大小吗?

【问题讨论】:

你最后做了什么? 问题仍然悬而未决,我仍然不知道移动浏览器的行为方式以及最佳做法是什么。 【参考方案1】:

根据我的经验,如果您将其设置为 100%,大多数现代智能手机浏览器都非常擅长设置合适的字体大小 - 但您永远无法确定。

如果是我,我会通过手动设置你喜欢的字体大小来增加额外的保护层,以适应较小的屏幕分辨率。

@media (max-width: 767px) 
  body 
    font-size:18px;
  

粗略地说,您必须在移动设备上对其进行测试才能获得所需的完美字体大小。

亚当。

【讨论】:

通过使用媒体查询和 px 作为单位,你违背了这个问题的目的 我回答了这个问题,然后得出结论,最好自己手动设置。亚当。

以上是关于基本字体大小与移动设备的主要内容,如果未能解决你的问题,请参考以下文章

移动设备的 CSS 字体大小

CSS / Bootstrap - 字体大小未正确从计算机调整到移动设备:移动设备上的字体看起来很小

移动设备的最佳实践字体大小

为啥字体大小(和其他元素)在移动设备上显得如此之小

css 在移动设备上调整字体大小

字体大小反应原生