はんのうネットワーク

昔、90年代にはWebはデスクトップとしか互換性がなかった。しかし、近年、さまざまなサイズの携帯電話やタブレットが次々と発売され、多くのユーザーが自分のタブレットと携帯電話を同時に使ってホームページを閲覧している。 インタラクティブWebを作成しないと、コンテンツが切り取られたり、スペースが浪費されたり、正常に動作しない可能性があります。 今日は反応型ネットワークを学びましょう🔥

Content Is Like Water

今日のテーマを表す文章内容を水のようにする.これは,内容がどの容器に置かれても,美しく気前よく設計されなければならないことを意味する.

モールドを流す

Fred layoutと呼ばれています.レイアウトのサイズを変更して、ウィンドウのサイズに合わせてフローティングを維持します.
以前はfloatプロパティと%を使用して実装されていました.

.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}

最近、フレキシブルWebでは、Flex grid、Flex box、%、vw、vhなどの多くのプロパティが使用されています.属性値のみを使用すると、Webのサイズに応じてコンテンツが変化します.リアクションネットワークでは、コンテンツのサイズを調整するだけでなく、コンテンツがある程度再配置されていることも確認できます.Media Queryを使用しています.さらに強調表示したい内容を上に配置することができます.
確実なブレークポイントはありませんが、通常は
Desktop : 1024~, Tablet : 1023~768, Phone : 480~320
このように3種類に分けられます.

@media screen and (min-width : 800px) {
  .container{
  	width : 50%;
  }
}

以下、画面が少なくとも800 px(800 px以上)に小さくなった場合、幅は50%であることが理解される.Typeはprint、speech、all、screenで区切られ、and、カンマ、not、onlyが提供されます.
(ほとんどの場合、max-widthとmin-widthを使用してインタラクティブなWebを実現します!)
詳細については、サンプルを使用してさまざまなプロパティを独学で学習するを参照してください.