设计响应浏览器字体设置的网页

时间:2014-03-21 20:45:21

标签: html css responsive-design

我的一位同事发现我制作的页面显示不正确,因为他将Chrome中的字体大小增加到“大”。

我意识到我没有为页面指定默认字体。当我这样做时,它覆盖了他的浏览器设置并以我指定的大小显示文本。现在,他可以看到页面,但文本不是他想要的大字体。

是否可以设计页面,使我的div和容器响应这样的浏览器设置?换句话说,如果用户在浏览器设置中增加了默认字体大小,是否有办法增加div的大小?

我的直觉告诉我这是不可能的,因为CSS媒体查询会响应窗口大小。我希望有人可以在这个主题上启发我或确认我的怀疑。

2 个答案:

答案 0 :(得分:1)

Web开发和CSS中的字体(以及许多其他东西)的工作方式是将CSS写入建议到浏览器的外观。浏览器可以自由地实现您的建议(通常会在95%的情况下,只要它们有意义),但也可以自由地忽略它们。字体很难,因为,(1)它们在浏览器可能忽略的东西上很高,(2)有一小部分字体可以可靠地预期存在于所有设备上,并且(3.)那里不是通过网络在任意设备上显示任意字体的任何100%解决方案。

那就是说,听起来这些是你可能最感兴趣的概念:

  • EM widthem的宽度基本上代表用户字体中字母m的宽度。这个以及百分比(有一些主要的缺陷)允许您指定相对字体大小。

  • Font stacks,这是一种CSS声明,试图通过在列表中声明类似的字体来实现页面的一致外观,浏览器可以显示或回退,直到选择和显示用完为止默认。

  • Reset CSS给自己一个空白的名单。有各种各样的实现,但重置CSS试图规范各种主要浏览器中默认CSS的各种差异。

答案 1 :(得分:0)

如果您根据ems和rems而不是像素或点设置所有尺寸,则所有内容都将相对于用户设置的字体大小完成。这允许用户选择他们的默认字体大小并让所有内容都围绕它调整大小。