css - 如何为移动 CSS 调整标题大小

Question

我的标题字体是 60 像素，我正在尝试重新设置格式以能够缩小或使其响应移动设备，这样单词就不会在单词中间被截断。

非常感谢!

这是代码:

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*/
}

}