###前提・実現したいこと
メディアクエリを使用して、760px以下/以上のデバイス毎にCSSを分けたい。
###発生している問題・エラーメッセージ
デベロッパーツールでスマホアイコンを押して検証した時にCSSが適用されない。
実際スマホで見てもPC用のCSSが適用されている。
PCのブラウザーの大きさを調整した時はブレイクポイントで切り替わる。
###該当のソースコード
------HTML------
------CSS/PC------
#main{
max-width:760px;
border:2px solid #2D4BD8;
}
.left{
float:left;
}
#main:after{
clear:both;
display:block;
content:"";
}
------CSS/SP------
#main{
max-width:760px;
border:2px solid #C71619;
}
.left{
float:left;
}
#main:after{
clear:both;
display:block;
content:"";
}
###試したこと
max-widthの部分をmax-device-widthにする。
すると、PCで縮めるとCSSが適用されない。
スマホでコンテンツの右側に謎の余白が出る。
回答1件
あなたの回答
tips
プレビュー