ウェブサイトの作り方


シリーズの第3のエピソード(5分でCSS/JSトリック)のHello World!は、CSSトリックについてありました.
今回は別のCSSトリックをお見せしたいと思います.どのようにウェブサイトを有効にするか(またはどのようにメディアのクエリを動作させる).
それは非常に困難ではない、私はちょうどいくつかの重要なことを強調したい.まず、何かを応答したいときは常にこれを念頭に置いてGoogleデバイスのツールバーを使用します.

次に、これらの5つの異なる画面サイズのメディアクエリを追加します.
@media only screen and (max-width: 1200px) {
  body {
    // Change design here 
  }
}
私はあなたの5つのメディアの質問をコピーし、一度に編集を開始することをお勧めします.頻繁にあなたのウェブサイトを確認するには何をやっていることを確認してください.
また、画面の解像度をチェックするためにメディアのクエリを使用することができます.
@media (orientation: landscape / portrait) {
  body {
    // Change design here 
  }
}

@media (resolution: 150dpi) {
  body {
    // Change design here 
  }
}
例えば、ここで応答するタイトルを作成しました.
Click Me
これが助けと感謝の読書を!

Please smash that like button to make me understand that you want the series to continue :)


この記事をチェック


我々の会報を購読してください!


Loooong、楽しい、毎週あなたのために要約
私の記事の無料のPDF版
カスタマイズ可能な受信トレイ
それは---フリー-とあなたは私を助ける!