私のポートフォリオサイトでは、モバイルでライン高さが動作していません

新しいスタックオーバーフローが発生しましたが、これでは苦労しました。最近、私のポートフォリオサイトを作成しました。このサイトは、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>

出典

2017-11-02 jenna reed

をplzはあなたのコード – ahmednawazbutt

全体のHTML/CSSコードを表示したり...？ –

本当にトラブル（関連HTMLやCSS）を与えているだけコード – ahmednawazbutt

実際には、メディアクエリでの問題は、メディアクエリの標準の宣言に従うことを忘れません。

.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 { 
 
\t font-size: 30px; 
 
\t letter-spacing: -0.04em; 
 
\t line-height: 32px; 
 
\t background-color: red; 
 
\t } 
 
}

<meta name="viewport" content="width=device-width" /> 
 
<body> 
 
\t <div class="ct ct--body"> 
 
    <span class="text text--header">Jenna is a Product/Visual Designer.</span> 
 
    </div> 
 
</body>

それが有用である場合には感謝:)

出典

2017-11-02 05:27:37

私のポートフォリオサイトでは、モバイルでライン高さが動作していません

答えて

関連する問題