0

わかった、

レスポンシブ Web サイトの CSS メディア クエリとメタ ビューポート タグについて、多くの質問があることは承知しています。私はそれらのトンを読みましたが、運がありません.

私はレスポンシブなウェブサイト、ポートフォリオウェブサイトを持っています。ある日、レスポンシブ機能が機能しなくなりました。私はそれを調べ始めましたが、運がありませんでした。メタ ビューポート タグを使用するようにしましたが、何もしていません。ここに私の<meta>タグがあります：

<meta name="viewport" content="width=device-width, initial-scale=1">

レスポンシブ CSS ファイルの 1 つのセクション:

@media screen and(max-width: 800px){
    /*body:before{ color: #fff; content: 'Max-Width: 800px'; }*/

    .social-media a,
    .social-media iframe{
        margin-bottom: 10px;
    }

    .level2{
        height: 140px;
    }

}

私はまた、このコードの有無にかかわらず試しました:

@-o-viewport,
@-ms-viewport{
  width: device-width;
}

イライラするのは、職場でレスポンシブ サイトを完成させたばかりで、問題がなかったことです。私が捉えられなかった何かを、別の目が捉えることができるかもしれないと思います。

Web サイトは pjlamb12.github.io で見ることができます。デスクトップでは問題なく表示されますが、モバイル デバイスでは見たくありません。

ありがとう！

PS

これが問題かどうかはわかりませんが、このサイトは GitHub ページにあり、Jekyll を使用してサイトを運営しています。

編集

残りのコードは、https://github.com/pjlamb12/pjlamb12.github.comの GitHub でも確認できます。

4

1 に答える 1

3

さて、私は問題を理解しました。本当に愚かな、小さな問題。それは私のメディアクエリラインにありました。これが私が持っていたものです：

@media screen and(max-width: 800px){
    /* styles */
}

しかし、あなたが持っている必要があるのは：

@media screen and (max-width: 800px){
    /* styles */
}

違いに気づきましたか？数分かかりましたが、最初の行のandと の間にスペースが必要です。(

うまくいけば、他の誰かがこの問題を抱えている場合は、これを見て、最初に試してみてください.

ありがとう！

于 2013-09-26T04:43:51.973 に答える