堆栈溢出的新手,但我在这方面苦苦挣扎。我最近创建了我的投资组合网站,它似乎可以跨所有设备断点和笔记本电脑上的 Chrome 媒体查询工作。但是,当我在手机上访问该网站时(尝试了 Chrome 和 Firefox),标题行高消失了。它是嘎吱嘎吱的,不可读的。任何想法可能会发生什么?我真的很感激!似乎无法调试,因为它只能通过移动设备进行。
.text--header {
font-size: 30px;
line-height: 38px;
display: block;
font-stretch: none;
margin-top: 95px;
}
@media screen and (min-width: 320px) and (max-width: 630px) {
.text--header {
font-size: 30px;
letter-spacing: -0.04em;
line-height: 32px;
}
}
<div class="ct ct--body">
<span class="text text--header">Jenna is a Product/Visual Designer.</span>
</div>
最佳答案
实际上,媒体查询的问题不会忘记遵循媒体查询的标准声明。
.text--header {
font-size: 30px;
line-height: 38px;
display: block;
font-stretch: none;
margin-top: 95px;
background-color: #ccc;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 630px) {
.text--header {
font-size: 30px;
letter-spacing: -0.04em;
line-height: 32px;
background-color: red;
}
}
<meta name="viewport" content="width=device-width" />
<body>
<div class="ct ct--body">
<span class="text text--header">Jenna is a Product/Visual Designer.</span>
</div>
</body>
感谢它是否有用:)
关于css - 行高不适用于我的投资组合网站的移动设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47067494/