移动设备的 CSS 字体大小

Posted 2023-03-06

【中文标题】移动设备的 CSS 字体大小

【英文标题】：CSS font size for mobile

【发布时间】：2013-04-09 02:57:47

【问题描述】：

我完成了简单的页面，这些页面似乎可以很好地响应不同尺寸的屏幕。我没有做任何花哨的事情来实现这一点 - 只是避免了固定尺寸等。

然而，一个页面有一个大字体的大字：

当我调整浏览器大小时，所有其他内容都正确布局，但标题词当然不会中断：

处理这个问题的正确方法是什么？有没有办法根据屏幕宽度调整字体大小？

【问题讨论】：

你应该看看mediaqueries。您可以为移动布局（某个断点）设置媒体查询，并且可以更改字体大小。

【参考方案1】：

您可以使用以下媒体查询：

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) 
   body 
    background: #ccc;
  

更多信息可以在这里找到：http://css-tricks.com/css-media-queries/

【参考方案2】：

你试过FitText吗？

这是一个为这种场合而设计的 jQuery 插件。引用他们的描述：

FitText 使字体大小变得灵活。在您的流畅或响应式布局上使用此插件，以实现填充父元素宽度的可扩展标题。

【参考方案3】：

另一种选择是使用viewport-percentage lengths。

vw 单位：等于初始包含块宽度的 1%。

您可以在 CSS Tricks 上阅读更多关于它的信息，其中讨论了某些浏览器的重绘错误，但您可以使用一点 jQuery 来修复它。

http://jsfiddle.net/7L9QH/

CSS

h1 
    font-size: 25vw;