Question

我该如何回应我的文字？例如在桌面上

--------------------------------
   12  0  12   15              |
                               |
                               |
                               |
--------------------------------

如果字体大小是

，我想在移动设备上面

------
  12 |
  0  |
  12 |
  15 |

现在我的文字没有响应。我的数字是相互对立的。

以下是我正在使用的代码：

.hasCountdown {
    text-shadow: transparent 0px 1px 1px;
    overflow: hidden;
    padding: 30px;
    /*cursor:pointer;*/
}

.countdown_rtl {
    direction: rtl;
}
.countdown_holding span {
    background-color: #ccc;
}
.countdown_row {
    clear: both;
    width: 100%;
    padding: 3px 2px;
    text-align: center;
}


.countdown_show4 .countdown_section {
    width: 24.5%;
}


.countdown_section {
    display: block;
    float: left;

    text-align: center;
    line-height: 200%;
    margin:3px 0;
    font-family:'halvetica_light';
}
.countdown_amount {
    font-size: 450%;
}


.countdown_amount_red
{   
    color:red;
}

Answer 1

您可以尝试简单地添加以下内容（因为您没有提供用于测试的HTML）

html{
    font-size: 2vw;
}

h1{
    font-size: 1em; /*Change h1 or size to fit requirements */
}

Answer 2

查看this

这是bootstrap响应式设计。只需阅读链接网格系统，您就可以使文本响应。

Answer 3

遗憾的是，通过上述设置，您的字体永远不会响应，因为您没有考虑设备/窗口的大小。你的方法（或至少你把它放下的方式）将字体作为使整个事物响应的元素。我强烈建议您继续使用移动优先方法，并Luke Wroblewski explained it quite well back in '09

一旦你解决了这个问题，你就会开始意识到你想要实现响应式排版。为了实现这一目标，您可以使用不同的解决方案，如果您想要了解哪一个最佳，并且在您开始添加更多复杂性时不会中断，则可能需要更多阅读。

下面是一些非常快速的解释和一些参考，以便您的阅读乐趣（至少作为起点），当然，所有这些解决方案都使用媒体查询，所以一定要知道＆＃39那也是：

使用%或em进行字体大小测量，这是您正在寻找的最基本，最直接的解决方案。 IMO从长远来看有点难以维护，但它可以用于简单的小部件/组件（How to make your typography responsive）。
使用rems作为单位大小：这值得研究，可能需要对其背后的基本概念有所了解（Responsive typography with REMs: How to build a scalable typographic foundation in three steps）
使用vh或vw作为单位大小，分别是视口高度和视口宽度。（Viewport Sized Typography）

您可以发挥创意并使用这些方法的组合来实现最适合您的解决方案。

如果您有兴趣进一步了解网络排版，您还可以考虑modular scale and vertical rhythm，但这是另一个故事。

我希望这可以帮助您解决问题并选择正确的解决方案。

文本反应下的文字

3 个答案: