2017-08-05 10 views
0

ページの下にあるリンクは、580px(これは明らかにほぼすべての電話機の画面である必要があります)より小さい画面では、フォントサイズを大きくします。メディアクエリはモバイルでは機能しません

私はdevのツールでそれをチェックして、幅を変更した場合、それは

このenter image description hereのように正常に見えるが、iPhone 5、私は「携帯電話の画面モード」を使用したら、例えば、それが戻って25ピクセルの通常のフォントサイズにですどのようなメディアクエリが増加している必要がありますか? enter image description here

body{ 
 
    font-family: Raleway; 
 
    margin: 0; 
 
} 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
} 
 
/****************************/ 
 

 
img{ 
 
    width: 96%; 
 
    margin: 2%; 
 
} 
 

 

 
/*********** Footer Section **************/ 
 

 

 
#link-back a, #link-back p{ 
 
\t color: #666666; 
 
\t font-family: Raleway; 
 
\t font-weight: bold; 
 
\t text-decoration: none; 
 
    float: none; 
 
\t text-align: center; 
 
\t padding-top: 10px; 
 
\t font-size: 25px; 
 
    margin: 10px 0 -10px 0; 
 
    display: block; 
 
} 
 

 
#link-back::before 
 
{ 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 50px; 
 
    background:#666666; 
 
    opacity: .4; 
 
} 
 

 
:hover#link-back a { 
 
    color: red; 
 
} 
 

 
#copyright p, #copyright{ 
 
    text-align: center; 
 
    float: none; 
 
    margin: 0 0 5px 0; 
 
    padding: 0; 
 
    color: #b7b7b7; 
 
    font-size: 13px; 
 
} 
 

 
@media all and (max-width: 580px){ 
 
    #link-back a, #link-back p{ 
 
     font-size: 45px; 
 
     padding-top: 15px; 
 
    } 
 
    #link-back::before{ 
 
     height: 80px; 
 
    { 
 
}
<html> 
 
<head> 
 
\t <title>Typographic Pairing</title> 
 
\t <link rel="icon" type="image/png" href="../img/heart.png"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> 
 
\t <link rel="stylesheet" href="main.css"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <img src="http://heartcube.co.uk/typographic-pairing/project2.jpg" alt="project 2"> 
 
    <p id="copyright">&copy; 2017 Bettina Bremm</p> 
 
    
 
    <p id="link-back"><a href="../work/index.html" onclick="self.close()">back to heartcube</a></p> 
 

 
</body> 
 
</html>

+3

あなたの 'viewport'メタタグはどこですか? – CBroe

+0

私は愚かで非常に迅速に解決されたうーん、私はそれを忘れてしまった、おかげで、私は数日間気づかなかっただろう – heartcube

答えて

0

@CBroeが気づいたよう は、メタタグは、ビューポートのために行方不明になりました!

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
関連する問題