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

标签 html css responsive-design

我的一位同事注意到我构建的页面显示不正确,因为他将 Chrome 中的字体大小增加到“大”。

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

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

我的直觉告诉我这是不可能的,因为 CSS 媒体查询会响应窗口大小。我希望有人能就这个话题启发我或证实我的怀疑。

最佳答案

Web 开发和 CSS 中字体(以及许多其他东西)的工作方式是您编写 CSS 以建议浏览器应该如何显示。浏览器可以自由地执行你的建议(通常情况下,95% 的情况下,只要它们有意义),但也可以自由地忽略它们。字体很难,因为 (1.) 它们在浏览器可能忽略的事物列表中排在前列,(2.) 有一小部分字体可以可靠地预期存在于所有设备上,并且 (3.) 有目前还没有通过网络在任意设备上显示任意字体的 100% 解决方案。

也就是说,听起来这些是您可能最有兴趣学习的概念:

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

  • Font stacks ,这些 CSS 声明试图通过在列表中声明相似的字体来提供跨页面的一致外观,浏览器可以显示或回退到它用完所有选项并显示默认值。

  • Reset CSS给自己一张白纸。这有多种实现方式,但重置 CSS 试图规范各种主要浏览器中默认 CSS 的各种差异。

关于html - 设计响应浏览器字体设置的网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22569201/

相关文章:

css - 使用 flexbox 的多列和多行布局

html - 将聊天箭头从左侧移动到右侧

javascript - 选择窗口 html

jQuery - 标题闪烁

javascript - 如何根据 Geo ip 数组显示或隐藏元素

wordpress - 有没有办法让网站自动响应?

html - 页面内的 Jekyll 链接

javascript - 如何从 HTML-PhP 的表中的查询列表中运行特定查询

css - Bootstrap Carousel - 如何在幻灯片之间慢慢淡入淡出

css - 响应式设计@media 断点不起作用