Q&A
ブラウザのCHROMEの画面の幅を400pxにしてみたのですが、@media (max-width:768px;)の欄に書いたCSSが反映されません
CSSに記述するレスポンシブの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.0,minimum-scale=1.0"> 6 <title>single</title> 7 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"> 8 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:700,400"> 9 <link rel="stylesheet" href="css3/normalize.css"> 10 <link rel="stylesheet" href="css3/single.css"> 11 </head> 12 <body> 13 <header class="header"> 14 <p class="site-title-sub">Web designer's portfolio</p> 15 <h1 class="site-title">HI,MY NAME IS...</h1> 16 <p class="site-description">Check out some of my works.</p> 17 <div class="buttons"> 18 <a href="#about" class="button">LEARN MORE</a> 19 <a href="#contact" class="button button-showy">SEND MESSAGE</a> 20 21 </div> 22 </header> 23</body>
CSS
1@charset "UTF-8"; 2html{font-size:62.5%;} 3*,*::before,*::after{box-sizing: border-box;} 4body{ 5background: #151515 url("../images/bg.png") no-repeat fixed left bottom ; 6background-size:cover; 7color:#fff; 8text-align: center; 9font-size:1.4rem; 10font-family: Raleway, "Hiragino Kaku Gothic ProN",Meiryo,sans-serif; 11} 12 13.header{ 14padding:170px 30px 80px; 15} 16.site-title-sub{ 17 margin:0px 0px 30px; 18 letter-spacing: 1px; 19 font-size:2.2rem; 20} 21.site-title-sub::before, 22.site-title-sub::after{ 23 content: ""; 24 width:140px; 25 height:2px; 26 margin:0px 30px; 27 background-color: #fff; 28 vertical-align: middle; 29 display:inline-block; 30} 31.site-title{ 32 margin:50px 0 40px; 33 font-size:7.6rem; 34} 35.site-description{ 36 margin-bottom:50px; 37 color:#888; 38 font-size:1.6rem; 39} 40.button{ 41 display:inline-block; 42 width:200px; 43 padding:20px; 44 border-radius: 4px; 45 background-color: #afa58d; 46 color:#fff; 47 text-decoration: none; 48 letter-spacing: 1px; 49 font-size:1.2rem; 50 margin:10px; 51} 52.button:hover{ 53 opacity: 0.9; 54} 55.button-showy{ 56 background-color:#f1b400; 57} 58@media screen and (max-width:768px;){ 59 .site-title-sub::before, 60 .site-title-sub::after{ 61 display:block; 62 width:80%; 63 margin:10px auto; 64 } 65.site-title-sub{ 66font-size:1.7rem;} 67}
回答1件
0
ベストアンサー
CSS
1/* @media screen and (max-width:768px;) 2 ↓ */ 3 @media screen and (max-width:768px)
【メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries#targeting_media_features
投稿2021/01/12 13:39
総合スコア69596
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/12 14:15