标题中的文本缩放

Question

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

在我的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

Answer 1

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

我建议你考虑使用bootstrap因为它应该真正加快速度并消除响应开发中的许多痛苦。