【问题标题】: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){ /* 这里有新规则 */ }
猜你喜欢
  • 2016-07-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多