Responsive CSS Code List

テンプレ

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

CSS

@media screen and (min-width:766px) { 
/*　画面サイズが766px(PC)からはここを読み込む　*/
}

@media screen and (min-width:600px) and ( max-width:765px) {
/*　画面サイズが600pxから765pxまで(tab)はここを読み込む　*/
}

@media screen and (max-width:599px) {
/*　画面サイズが599pxまで(phone)はここを読み込む　*/
}

Mobile size で side を下に表示したい時

/* PC */
main{
   display: flex;
   flex-direction: row;
 }
.contents{
   width: 70%;
 }
 .side{
   width: 30%;
 }

/* ----------------------------------------------------- */

/* Mobile */
 main{
   flex-direction: column
 }
.contents{
   width: 100%;
 }
 .side{
   width: 100%;
 }