メディアクエリで画面サイズごとにCSSを切り分ける方法[レスポンシブデザイン]

@media print,screen and (max-width: 767px) {}
@media print,screen and (min-width: 768px) {}
@media print,screen and (min-width: 768px) and (max-width: 980px) {}
@media print,screen and (max-width: 980px) {}
@media print,screen and (min-width: 981px) {}
@media print,screen and (max-width: 1199px) {}
@media print,screen and (min-width: 1200px) {}@media print,screen and (max-width: 767px) {}
@media print,screen and (min-width: 768px) and (max-width: 980px) {}
@media print,screen and (min-width: 981px) {}@media print,screen and (min-width: 20em) {}
@media print,screen and (min-width: 30em) {}
@media print,screen and (min-width: 48em) {}
@media print,screen and (min-width: 67em) {}
@media print,screen and ( min-width: 79em ){}
@media print,screen and ( max-width: 48.875em ) and ( min-width: 48em ){}


 // スマホで表示させたい内容

 // PCで表示させたい内容
覚書
iPhone:320px=20em、480px=30emとなるので、portraitもlandscapeも1カラムで表示
iPad:768px=48emとなるのでportraitで2カラム
1024px=64emのlandscapeで3カラム
よかったらシェアしてね!
目次
閉じる