Question

我正在开发一个网页，其不同的段落使用不同的大小，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>

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

所以，问题是：如何对我的字体使用不同的尺寸或如何使它们针对不同的分辨率进行调整？

有人可以帮忙吗？谢谢！

Answer 1

尝试使用这个概念证明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%; }
}

工作demo on jsFiddle

Answer 2

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

Answer 3

您可以使用相对于屏幕分辨率的字体大小（em或pt），如lanzz所指出的那样。或者，您也可以根据“http://www.w3.org/TR/css3-mediaqueries/#width”

在css文件中使用媒体查询

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

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

Answer 4

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

原因很多。这是两个：

读取文本时有一个舒适的行长在屏幕上。我不想踢大黄蜂的巢，但让我们说吧大约80个字符。这些单位让您感受到它完美，然后将经验扩展到任何尺寸的屏幕。
它们允许你紧密地结合a的大小关系印刷标题及其附带的内容。

他们的工作方式

三个值中的任何一个上的一个单位是视口轴的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;
}

Answer 5

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

根据分辨率更改字体大小

5 个答案:

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

工作demo on jsFiddle