如何使标题调整大小的移动- CSS

Question

我的标题字体是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) {
}

Answer 1

您很接近，只需在每个媒体查询中添加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*/
}
} 

Answer 2

我所做的实际上是使用您使用的相同媒体查询制作标记，只是制作了不同的背景颜色，以便您知道它们都在工作。下面的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>

---

请注意，你可能需要稍微改变尺寸，使其适用于所有人，因为我注意到有些手机的屏幕比你使用的尺寸大。例如，我的华为屏幕显示回绿色，而我的iPhone 4s屏幕显示回紫色，但这只是我们在告诉你，你的代码应该可以工作。

你需要做的是打开chrome和开发者工具F12，你会看到控制台打开时，在左上角你会看到一个电话图标，点击它，然后你的屏幕会改变。看到左上角手机的下拉列表了吗?选择手机和它旁边的复选框，进入横向模式，可以看到我之前提到的不同变化。

希望这清楚，我很乐意帮助，如果你需要更多的帮助。链接到我托管代码更新的地方- http://coreb.co.za/lab/design/mediaQueries/

记住，本质上，这个样式应该根据你的尺寸将任何不是移动横向或纵向的东西都变成绿色然后如果尺寸符合要求那么你应该可以看到iphone 4是红色的，这是正确的横向紫色，你只需要设置正确的尺寸就像我之前提到的但如果需要的话，我在这里提供帮助

好运