如何为mobile-CSS调整标题大小 我的头的字体是60px，我试图重新格式化，以便缩小或使它对手机有响应，这样单词在单词中间就不会被切断。

非常感谢

代码如下：

h1 {
font-size: 4.286em; /* 60px */
margin-bottom: 24px;
width: auto;
text-align: center;

/* Portrait and Landscape */

@media only screen 
and (min-device-width: 240px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {

}
/* Portrait */
@media only screen 
and (min-device-width: 240px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}

/* Landscape */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {

}

---

您已经接近了，只需在每个媒体查询中添加

h1

更改，而且您的原始

h1

样式上缺少一个结束标记

h1 {
font-size: 4.286em; /* 60px */
margin-bottom: 24px;
width: auto;
text-align: center;
}
/* Portrait and Landscape */

@media only screen 
and (min-device-width: 240px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
h1 {
font-size: 4em; /* a little smaller*/
}
}
/* Portrait */
@media only screen 
and (min-device-width: 240px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
h1 {
font-size: 3.5em; /* a little smaller*/
}
}

/* Landscape */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
h1 {
font-size: 3em; /* a little smaller*/
}

} 

---

我所做的实际上是使用与您使用的相同的媒体查询制作标记，只是制作了不同的背景色，让您知道它们都在工作。下面的css将根据屏幕大小显示哪个屏幕将显示哪个颜色背景：

    /*This will be anything thats not mobile. it will show a green background*/
body {
    background: green;
}
h1 {
    font-size: 4.286em;
    /* 60px */
    margin-bottom: 24px;
    width: auto;
    text-align: center;
    color: #fff;
}
/* Portrait - portrait devices will be purple based on your dimension*/
@media only screen and (min-device-width: 240px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    body {
        background: red;
    }
    h1 {
        font-size: 4.286em;
        /* 60px */
        margin-bottom: 24px;
        width: auto;
        text-align: center;
    }
}
/* Landscape - landscape devices will be purple based on your dimension*/
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    body {
        background: purple;
    }
    h1 {
        font-size: 4.286em;
        margin-bottom: 24px;
        width: auto;
        text-align: center;
    }
}

---

我用于此测试的HTML：

<h1>This Is a Heading Tag</h1>

这是一个标题标签

---

请注意，您可能需要稍微更改尺寸以使其适用于所有手机，因为我注意到有些手机的屏幕比您使用的尺寸大。e、 g-我的华为环境变为绿色，而我的iphone 4s环境变为紫色，但这只是我们向您展示的代码应该可以工作。 你需要做的是模拟打开chrome和开发者工具F12，你会看到控制台打开时，在左上角你会看到一个手机图标，点击它，然后你的屏幕就会改变。你看到左上角的电话下拉列表了吗？选择手机和旁边的复选框，以获得横向模式，查看我前面提到的不同变体

希望一切顺利，如果你需要更多的帮助，我会很乐意帮助你。链接到我主持代码更新的地方- 请记住，从本质上讲，这种风格应该根据您的尺寸将任何非移动横向或纵向的东西变为绿色，然后如果尺寸符合要求，您应该能够看到iphone 4是红色的，正确的，而横向是紫色的，你只需要按照我前面提到的正确尺寸，但如果需要，我会在这里提供帮助

---

祝您好运

您是否意识到

H1

元素没有一个封闭的卷曲同义词？@Alon是的，我以为您将其保持打开状态以便媒体可以应用于H1元素？不，您需要在每个媒体查询中为H1添加特定样式（例如：

@media only screen.{H1{字体大小：2.286em；}}

@Alon是正确的，您需要关闭它，您也可以将带有H1样式的完整标签放入相应的媒体查询中，只需更改每个屏幕的大小/样式即可size@Torean这似乎仍然不起作用！你能告诉我它应该是什么样子吗？谢谢！！这仍然有效似乎无法处理我的手机人像视图。我试图缩小到较小的“em”，但仍然没有成功。知道是什么原因导致了此问题吗？请查看此网站，确保媒体查询与您使用的手机匹配。如果您仍然有问题，请告诉我您遇到问题的手机类型，我将为您构建一个。