标题中的文本缩放答案

【问题标题】：Text scaling in header标题中的文本缩放
【发布时间】：2014-06-17 11:35:48
【问题描述】：

我正在创建一个网站，我希望它能够在所有设备上正确扩展。

在我的 1080x1920 屏幕上，它运行良好，但在较薄的设备上，页面看起来不太好。

空白是标题文本的位置。我的代码可以在这里找到：

.header {
height: 80px;
background-color:#00117D;
background-size:100%;
color:#FFF;
font-size:30px;
font-weight:bold;
line-height: 80px;
padding: 0 30px;
border-bottom-style:solid;
border-width: 2px;
border-color:#FFF;
font-family:"Segoe UI";
}

.header p, .header a {
float: left;
margin: 0;
margin-left:30px;
color:#FFF;
text-decoration:none;
}

https://github.com/MooneyDev/project-Mooney

【问题讨论】：

您可能需要考虑在此处发布一些代码，而不是链接到外部链接，以便更好地获得所需的响应
我已经发布了一些代码。

标签： html css text scaling

【解决方案1】：

我在之前的项目中所做的，它在除正文之外的所有属性上使用 em 字体大小值，然后在各个阶段使用 media queries 根据需要更改基于 px 的正文值。这应该捕获所有其他值并保持它们相称。

我建议您考虑使用 bootstrap，因为它确实可以加快处理速度并消除响应式开发所涉及的许多痛苦。

【讨论】：

我会使用 bootstrap，但是，我真的很想自己做这个。
在这种情况下，下载并查看引导代码库。它会提供非常丰富的信息，让您很好地了解要做什么以及为什么要做。从本质上讲，您需要一系列类，在媒体查询中进行操作并轻松利用某种网格系统
那么我应该对缩放标题的手持设备使用@media 规则吗？
@Mooney 确实如此。您可以使用最大值和最小值。最小值作为指定尺寸的最小值开始，而最大值在指定尺寸之上停止工作，例如。 @media only screen and (max-width: 480px){ /* 这里有新规则 */ }