Question

我想让我主页上显示的标题文字更大，并防止它突破到第二行......

以下CSS代码可以使用，但随后它不再在移动设备上正常显示...

如何在下面实施CSS更改，以便它们也能正常响应？（无论如何，我真的只想对全尺寸电脑显示器进行这些更改......我对手机的默认设置感到满意。谢谢。

.home .welcome-message .wrap {width: 1240px;}
.home .welcome-message h1{font-size: 3.6em;}

http://ifear.me/密码：欢迎

Answer 1

白色空间：nowrap是您防止破线的必要条件媒体查询将允许您为具有不同宽度的窗口添加自定义css。

.home .welcome-message .wrap { width: 1240px; }
.home .welcome-message h1 { font-size: 3.6em; }

@media (min-width: 480px) {
  .home .welcome-message h1 {
    font-size: 12.6em; 
    white-space: nowrap 
  }
}

此处示例：fiddlejs

Answer 2

在响应式场景中，您需要关注两件事。一个是像素中显示器的大小，例如1920 * 1080等，第二个是像素比率，表示每个区域的像素密度（在大多数情况下为每英寸）。因此，您应该拥有各种CSS文件/类，这些文件/类按媒体和宽高比分隔，并在每个显示中加载正确的文件/类。

这两种类型媒体的两个CSS链接首先是1024px宽度显示，其中lce / led正常像素比率，第二个用于示例移动设备显示，具有768px像素宽度和1.5像素比率：

<link href="~/css")" rel="stylesheet" type="text/css" media="screen and (min-width : 1024px) and (max-width : 1920px)"/>

<link href="~/css")" rel="stylesheet" type="text/css" media="screen and (max-width : 768px) and (min-device-pixel-ratio : 1.5)"/>

下面是一些有用的链接：

希望得到这个帮助。

使CSS更改响应并防止换行

2 个答案: