メディアクエリの備忘録

忘れないように。
モバイルファーストの方が分かりやすくて好き。

css

/*
@media外に書いたcssは全ての幅で適応される
*/
p   {background-color:#000;}
@media screen and (min-width:320px){
/*
width320px幅から適応される
*/
p   {background-color:#333;}
}

@media screen and (min-width:768px) and (max-width:1024px){
/*
width768pxからwidth1024pxまでの幅で適応される
*/
p   {background-color:#555;}
}

@media screen and (min-width:1024px){
/*
width1024幅から適応される
*/
p   {background-color:#888;}
}
  • コーダーのための計算機