メディアクエリの目安サイズと書き方

2022-02-02

「max-width」と「min-width」で記入

headに書く方法

<link rel="stylesheet" href="hoge1.css" type="text/css" media="screen and (min-width: 480px)">
<link rel="stylesheet" href="hoge2.css" type="text/css" media="screen and (min-width: 768px)">

1列

375px以下

.item{
width: 100%;
}

2列

376pxから639px以下

@media(min-width: 376px){
 .item{
  width: calc(100% / 2);
 }
}

3列

640pxから768px以下

@media(min-width: 640px){
 .item{
  width: calc(100% / 3);
 }
}

4列

769px以上

@media(min-width: 769px){
 .item{
  width: calc(100% / 4);
 }
}

色の出し分け

@media screen and (min-width: 480px) {
  p {
    color: orange;
  }
}
@media screen and (min-width: 768px) {
  p {
    color: blue;
  }