緒論📌

HTML/CSS Instagramログインページクローンコード!
成果物の表示

DESKTOP環境(min-width:1527 px)

footer

flex-direction: rowの属性を与える横並べ替えを行った後、space-around属性により、物品の周囲に同じ間隔を設け、左右に置く.

flex-direction: row;
justify-content: space-around;

TABLET環境(最小幅:876 px)

footer

justify-content: flex-start属性を開始点に配置します.
©2020 INSTAGRAM FROM FASEBOOKテキストコンテンツのcopyrightクラスもtext-align: leftを介して左揃えされています.

MOBILE環境

phones img

ログインフォームの左側にある携帯電話の写真は消え、ビューポートにのみログインフォームが表示されます.

.phones-container {
  display: none;
}

また,タッチ制御が便利で,リンク間に隙間ができ,ユーザの利便性が向上した.

リファレンス

Clumes YouTubeチャンネル