codePenでメディアクエリーは対応していますか

質問

cssの初心者です。ここ一週間位前からcodePenでHTML、CSS、Java Scriptの学習を開始したのですが、codePenはメディアクエリーに対応しているのか教えていただけますか。デスクトップファーストでコードを記載しており、class="gallery"はdisplay:flex; flex-direction:row;をしており、CSSコードの後半で
@media(max-width:800px){
.gallery{
flex-direction: column-reverse;
}}
と記載してcodePenの画面を小さくしたら、その画面が小さくなるだけで、メディアクエリーは効かなそうでしたので質問しました。コーディングの学習はVS Codeで行っていますが、codePenに記載する場合にはgoogleフォント設定や、共有画像の読み込みの様に何か特別な記載の方法があれば、ご教示くださるようお願いします。

回答No.1

retorofan · ベストアンサー

Q codePenでメディアクエリーは対応していますか？

A はい、CodePenはメディアクエリに対応しています。

CodePenでメディアクエリを使用するには、
CSSセクションに適切なメディアクエリを追加するだけです。

一例をあげてみます。
@media (max-width: 600px) {
body {
background-color: blue;
}
}
このコードは、
デバイスの画面幅が600px以下の場合、背景色を青色に設定します。

メディアクエリの使用上で max-widthとmin-width に関して、
・重複して記述しないこと
・反対に記述しないこと
が注意点として挙げられます。

お礼

問題は解決していませんが。回答ありがとうございます。ベスト回答とさせていただきます。

Powered by GRATICA

補足

ご回答ありがとうございます。早速ご教示頂いた内容を試してみましたが、効きませんでした。影響がなさそうな、背景色や文字を変えてみましたがダメで、メディアクエリー自身が機能していなそうです。bodyではなく、class="gallery"とh2タグで指定しています（一応bodyでも試しましたが変化なかったので）。今回試しているコードはJava Script(以下js)も記載しているため、それが悪さしていると考え、検証の過程でjsは全てコメントアウトしたのですが、改善しなかったので、jsは影響していないと考えコメントアウトを外しました。

事前にVScodeでコーディングし大方の形にはなったのですが、モヤモヤしていたのは、このメディアクエリーは、chromeをブラウザー（Developer toolは未）としてだけ使うと機能し、Developer toolを使って、画面サイズを縮小すると機能しなかったので疑問に思っていました。

codePenで記載しているので、リンクを貼り付けておきます。こちらで質問するきっかけとなったコードは
OKWAVE_test01です。@media (max-width: 800px)の箇所の中はテストなので、質問する前に変更しており、分かりやすい設定としました。
https://codepen.io/masa2418/pen/RwdaOQr

当初の想定はモバイルサイズになれば、
OKWAVE_test02のイメージに大まかには持っていきたいと思っていました。
https://codepen.io/masa2418/pen/MWxyRGB
何分経験が浅いので、根本的にコードの記載が間違っていることがあるかもしれませんが、ご指摘いただけたら助かります。