自分のブログを作成しています。レスポンシブデザインの設定でつっかかってしまいました。タブレット向けに書いたつもりのcssの内容がスマホ画面に適用されてしまいます。Webデザインに詳しい方いらっしゃいましたら対処法を教えていただけるとありがたいです。
<body>の<h1>にあるブログの題名(Niroh's Blog)をいじくろうとしています。 ローカル環境ではスマホ向けに書いたcssが適用されて、狙ったとおり大きく表示されるのですが、 本番環境ではスマホ画面でもタブレット向けのcssが適用されてしまって表示小さくなってしまいます。 画像はChromeで表示したものですが、実際にスマホで表示しても小さく表示されてしまっています。デプロイはpythonのdjangoで行っています。
可能性としてはそちらに問題があるのかもしれません。
どなたか原因として考えられるアイデアがあれば教えていただけると嬉しいです。
何卒よろしくお願いいたします。
該当のソースコード
base.html
html
1<html> 2<head> 3<title>Niroh's Blog</title> 4<meta name="viewport" content="width=device-width,initial-scale=1"> 5{% load static %} 6<link rel="stylesheet" type="text/css" href="{% static 'blog/style.css' %}"> 7<link rel="stylesheet" type="text/css" href="{% static 'blog/responsive-style.css' %}"> 8</head> 9<body> 10<a href="{% url 'index' %}"> 11/*大きく表示したいのはここです*/ 12<h1>Niroh's Blog</h1> 13</a> 14<div> 15 <br><br> 16 {% block body %} 17 {% endblock %} 18 <br><br> 19</div> 20</body> 21</html>
style.css
css
1* { 2 background-color:white; 3} 4 5 6h1 { 7 font-size: 80; 8 font-family: 'arial black', sans-serif; 9 font-weight: bold; 10 text-align: center; 11 text-decoration: none; 12 color: rgb(197, 199, 199); 13} 14 15a:link { 16 text-decoration: none; 17} 18a :hover { 19 text-decoration: underline; 20} 21 22body { 23 margin: 50; 24 font-family: "Hiragino Kaku Gothic ProN", sans-serif; 25} 26
responsive-style.css
css
1/* スマホ向けレイアウト */ 2@media screen and (max-width: 480px) { 3 h1 { 4 font-size: 60; 5 margin: 40px 0px; 6 } 7 8 body { 9 margin: 40; 10 } 11 12} 13 14/* タブレット向けレイアウト */ 15@media screen and (min-width: 480px) and (max-width: 1030px) { 16 h1 { 17 font-size: 80; 18 padding: 40px 10px; 19 } 20 21 body { 22 margin: 100; 23 } 24}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/03/19 11:35
2019/03/19 11:41
2019/03/19 16:35
2019/03/19 16:54
2019/03/20 09:52
2019/03/20 12:04