15

我正在开发一个网页，它的不同段落使用不同的大小，h...等等。我正在使用em大小：font-size: 2em; ， 举个例子。但是，当我将屏幕分辨率更改为较低时，我希望该尺寸更小。

为此，我尝试了以下代码：

<script>
        if ( screen.width > 1600)
        {
            document.write('<style>#centered h1 { font-size: 2em; } </style>');
        }
        else if (screen.width <= 1600 && screen.width >= 1360)
        {
            document.write('<style>#centered h1 { font-size: 1.7em; } </style>');
        }
        else if (screen.width < 1360 && >= 1024)
        {
            document.write('<style>#centered h1 { font-size: 1.4em; } </style>');
        }
        else
        {
            document.write('<style>#centered h1 { font-size: 0.8em; } </style>');
        }
    </script>

第一：它不起作用......
第二：我认为应该有更清洁的方法......

所以，问题是：如何为我的字体使用不同的大小，或者如何让它们适应不同的分辨率？

有人可以帮忙吗？谢谢！

4

5 回答 5

38

尝试使用这个概念证明 CSS：

html { font-size: 62.5%; }
body { font-size: 1em;}

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

jsFiddle 上的工作演示

于 2012-06-13T10:21:44.880 回答
4

您想使用媒体查询而不是 JS。或者，使用 JS 向主体添加一个类，然后使用它来定位你想要的。

于 2012-06-13T10:18:05.443 回答
3

最好的解决方案是视口大小的排版

有很多原因。这里有两个：

  1. 在屏幕上阅读文本时有一个舒适的行长。我不想踢马蜂窝，但假设它大约有 80 个字符。这些单元让您感觉完美，然后将这种体验扩展到任何尺寸的屏幕。
  2. 它们使您可以将排版标题及其附带的内容的大小关系紧密结合起来。

他们是如何工作的

三个值中任何一个的一个单位是视口轴的 1%。“视口” == 浏览器窗口大小 == 窗口对象。如果视口为 40 厘米宽，则 1vw == 0.4 厘米。

对于 font-size 的使用，我猜它是一个具有该大小的“字母”，但正如我们所知，在非等宽字体中，字母的宽度是相当随意的。我发现你只需要调整这些值就可以得到你想要的。这基本上就是我们所做的，对吧？

  • 1vw = 视口宽度的 1%
  • 1vh = 视口高度的 1%
  • 1vmin = 1vw 或 1vh，以较小者为准
  • 1vmax = 1vw 或 1vh，以较大者为准
h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}
于 2015-09-28T18:03:11.237 回答
1

正如 lanzz 所指出的，您可以使用相对于屏幕分辨率的字体大小（em 或 pt）。或者，您也可以按照“http://www.w3.org/TR/css3-mediaqueries/#width”在您的 css 文件中使用媒体查询

@media screen and (min-width: 400px) and (max-width: 700px) { … }

您可以设置任何最小和最大宽度。

于 2012-06-13T10:25:01.103 回答
0

em大小是相对于父元素的大小。您可能希望以pt单位（1pt = 1/72 英寸）设置字体大小，这些单位与分辨率无关，并且设计为在任何分辨率下看起来都相同。

于 2012-06-13T10:18:14.273 回答