Q&A
回答ありがとうございます。
色々試したところscreen andについては抜けていても反映されました。
htmlの外部ファイル読み込みで困っています。
linkタグでcssファイルを3つ読み込もうとしてスマホ用とタブレット用のcssは反映されるのですが、ウィンドウ幅が769pxを超えてもパソコン用のcssが反映されずにスマホ用のcssとして反映されてしまいます。
###試したこと
スマホ用のlinkタグにmedia="max-width:499"を追加しても、スマホではパソコン用のcssが反映されてしまいます。media="handheld"としても同じでした。
パソコン用のlinkタグにscreen andを追加するとスマホ画面でパソコン用のcssが反映されてしまいます。
3つのlinkタグにscreen andを追加しても上記と同じ結果となりました。type="text/css"を追加しても変わりませんでした。
linkタグにあるmediaを全て消し、それぞれのcssファイルにmax-width:640px,max-width:768px,min-width:768pxとしたところ、それぞれのウィンドウ幅で表示されるのですが、chromeのスマートフォン表示モードに切り替えるとPC用のcssになってしまいます。スーパーリロードしても変わりませんでした。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name=”viewport” content=”width=device-width,initial-scale=1″> 6 <title>サイト</title> 7 <link rel="stylesheet" href="css/smpho.css"> 8 <link rel="stylesheet" media="(min-width:500px) and (max-width:768px)" href="css/tab.css"> 9 <link rel="stylesheet" media="min-width:769px" href="css/pc.css"> 10 <script src="https://kit.fontawesome.com/15bad9149b.js"></script> 11 <script src="js/main.js"></script> 12 </head> 13 <body></body> 14</html>
css
1smpho.css 2 3.smpho{ 4 background-color: red; 5}
css
1tab.css 2 3.tab{ 4 background-color: blue; 5}
css
1pc.css 2 3.pc{ 4 background-color: yellow; 5} 6
回答2件
0
ベストアンサー
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
こちらのダブルクォーテーションが全角などになっています。
また、<link rel="stylesheet" media="min-width:769px" href="css/pc.css">
こちらのmin-widthの指定が括弧で囲われていません。
media="(min-width:769px)"としてください。
投稿2019/10/23 03:53
総合スコア217
0
「screen and」が抜けているからではないでしょうか。
参考URLにあるように、CSSを１つにして、CSS内でかき分ける方法もあります。
（できるだけ同じ部分は流用し、必要な部分だけ上書きします。）
投稿2019/10/23 03:34
総合スコア109
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/23 04:12