Q&A
前提・実現したいこと
HTML,CSS webサイトのコピー練習をしている初心者です。
レスポンシブ対応、スマホ版のサイトをchoromeの検証で確認しながら作ろうとしたところ
うまくいきません
発生している問題・エラーメッセージ
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>スマホ</title> 6 <link rel ="stylesheet" href="responsible.css"> 7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8 </head> 9<body> 10 <header> 11 <h1>表示できる？</h1> 12 </header> 13 14 15 </body> 16</html> 17 18CSS 19 @media(max-width:768px){ 20 21header{ 22 background-color:skyblue; 23 height: 50px; 24} 25 26h1{ 27 color:blue; 28} 29 30} 31
エラーメッセージ chromeで検証をしてスマホ版のデザインを確認するも、
max-widthが1000pxくらいにしないとcssが変化しません
試したこと
HTMLは表示することができます。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
下記のような記述がhead要素内に必要です。
HTML
1<meta name="viewport" content="width=device-width,initial-scale=1">
【meta viewportとは～設定方法とスマートフォン（android・iphone）で効かない原因｜SEOラボ】
https://seolaboratory.jp/48581/
【もう逃げない。HTMLのviewportをちゃんと理解する - Qiita】
https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607
投稿2019/12/21 08:29
総合スコア69596
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/12/21 08:45