2017-10-17 7 views
0

ブラケットを別の位置に変更しようとしました。 CSS3の次のコードは、W3C CSS Validatorで受け付けられません。誰かが私が解析エラーが次のコード部分にあるのを特定するのを助けてくれますか?CSS3ビューポート解析エラー

多くの感謝!あなたが入れ子にすることはできません

@media (min-width: 300px) { 
    @viewport { 
     width: 300px; 
    } 
} 

答えて

1

media query内部@viewport at-rule。メディアクエリは、特定の幅でページ上の要素の表示方法を制御し、は<meta name="viewport">のフォールバックです。 @viewportは、CSSのベースレベルで、メディアクエリの外にある必要があります。それはなるだろうどのようにほとんど差を考慮するとWindowsの8またはWindows 10上のInternet Explorerの「スナップモード」を扱うとき、あなたがない限り@viewportだけ関連する、あなたはかなり安全にそれを完全に無視することができている、と述べた

非常に特定のブラウザーとオペレーティングシステム用に最適化されたラベルコントロール。

<meta name="viewport" content="width=device-width, initial-scale=1">のMETAビューポートを設定するだけで、モバイルデバイスのさまざまなブラウザを処理できます。

単純にページ上の要素を調整しようとしていると仮定すると、さまざまなブラウザを扱うときに、不一致で直接その要素を対象にすることができます。通常のメディアクエリを使用するだけで、さまざまな幅でページのスタイルを設定できます。

@media screen and (min-width: 300px) { 
    #id { 
    width: 300px; 
    } 
} 

希望します。 :)

+0

ようにする必要がありますが、すべてのブラウザと後方のいくつかのバージョンでは、すべての画面(RWD)のために必要です。このコードは、HTML3のページに配置されないCSS3のコードの最初の行です。私はあなたのHTML5ソースコードに既に提案しているメタタグを持っています。 –

+0

それであなたは大丈夫でしょう。私は正直なところ、 '@ viewport'の使用については心配しません。あなたは明らかに '@ media'クエリを使いたいと思うでしょう。標準のメディアクエリ(HTMLの ''タグと一緒に)を最初に構築して、それをWindows上のIE上にどのように表示するかを見ることをお勧めします。サイトが正常に表示された場合(99%の可能性)、他に何もする必要はありません:) –

1

htmlのheadセクションにmetaを追加します。

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

そして、あなたのCSSは、私はフルスタックのWeb開発者および割り当てのためにnanodegreeをしています。この

@media only screen and (max-width : 500px) { 
    div { 
    width: 300px; 
    } 
}