在我的网站上我有:
.div1 {
display:flex;
flex-direction:column;
align-items:center;
}
h1 {
font-weight:normal;
font-size:50px;
font-family:Sans-Serif;
margin:0.5em;
color:#ccc;
}
.div1是一个div元素,包含页面上的所有其他元素。其中的第一件事是这样的标题:
<h1>B I O D I V E R S U S</h1>
在我的计算机中,当我将浏览器调整为非常窄(模拟智能手机屏幕)时,只有几个字母移动到下一行。横向边距与底部和顶部边距(0.5 em)一样小。
然而,在我的智能手机中,横向边距比底部边缘和顶部边缘大得多,因此所有字母都有足够的空间,而且还有一些字母转到第二行(下面段落中的相同问题)。
这是怎么回事?