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

2020年8月24日2022年10月24日

@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カラム

URLをコピーしました！

この記事を書いた人

今田紋奈

埼玉県川口市で、自営業や起業家のホームページ制作を行っいます。
Web制作会社に7年務めたのち独立。Web制作歴12年、2500件以上のサイト制作に携わり、WordPressサイトを得意とし「作って終わり」にしない、結果が出るサイトであることを大切にしてます。「10人いれば10通りの最適なサイトがある」という信念のもと、型にハマったサイトづくりではなく、マーケティングから考えた、その人のビジネスにとって一番最適なサイトをご提案。技術面で不安のあるWebデザイナーのシステム面のサポートも行っております。