CSS 勉強メモ0620

画面をスマホサイズに合わせたい時はでコンテント属性に以下を記載。

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

画面のサイズによってスタイルを変え場合
以下は画面幅が600-800pxの時に

に背景色をつける。
@mediaの次に条件を記載

@media(min-width: 600px) and (max-width: 800px){
  body{
    background: skyblue;
  }
}

以下は画面の大きさが0~599px,600~799,800~
で条件を分けて表示しているサンプルコード

/* common */
/* small screen */

body{
  margin: 0;
}

.image{
  background: pink;
  height: 100px;
}

.text{
  background: gray;
  height: 100px;
}

aside{
  display: none;
  /* 初めは見えないように noneにする */
}



/* @media(min-width: 0px) and (max-width: 599px){
  body{
    background: skyblue;
  }
} 
これは0-599は初期条件と同じのため特にいらない、600pxになると勝手に切り替わるので２つ目のmaxは特にいらない*/

/* 小さい画面から基本的に作り上げていく */

/* medium screen */
@media(min-width: 600px){
  section{
    display: flex;
  }

  .image{
    width: 200px;
  }

  .text{
    flex: 1;
  }
  

/* large screen */
@media(min-width: 800px){
  section{
    width: 800px;
    margin: 0 auto;
  }
  aside{
    display: block;
    /* ここでblockとすることで800px以上で表示となる */
    width: 160px;
    background: plum;
  }
}

/* 全てに共通する内容を全ての条件に書くのは面倒なので、最後に書いたものが優先されることを利用して最後にだけ記載する */