Question

新的堆栈溢出，但我在这个上苦苦挣扎。我最近创建了我的投资组合网站，该网站似乎可以在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>

Answer 1

实际上，媒体查询中的问题不会忘记遵循媒体查询的标准声明。

.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>

欣赏它是否有用：）

对于我的投资组合网站，行高不适用于移动设备

1 个答案: