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

标签 css mobile

堆栈溢出的新手,但我在这方面苦苦挣扎。我最近创建了我的投资组合网站,它似乎可以跨所有设备断点和笔记本电脑上的 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/

相关文章:

css - 如何使子元素永远不会换行到下一行,即使父元素的宽度对它们来说可能很小?

css - 资源解释为样式表但使用 MIME 类型 text/html 传输

javascript - 从移动网站切换到桌面网站?

php - jquery mobile header 跨页面重复

html - 格式化链接,使它们出现在 CSS 图像的顶部

jquery - 在 jQuery toggle 中我想改变按钮的形状

html 将图像保存到 android 和 ios 设备

android - 如何更改 RNGoogleSigninButton 的文本?

react-native - 如何为 AppLinks/通用链接获取任何应用程序的 URI 方案?

html - CSS 全屏背景在开发工具中有效,但在真实浏览器中无效