0
ページの下にあるリンクは、580px(これは明らかにほぼすべての電話機の画面である必要があります)より小さい画面では、フォントサイズを大きくします。メディアクエリはモバイルでは機能しません
私はdevのツールでそれをチェックして、幅を変更した場合、それは
こののように正常に見えるが、iPhone 5、私は「携帯電話の画面モード」を使用したら、例えば、それが戻って25ピクセルの通常のフォントサイズにですどのようなメディアクエリが増加している必要がありますか?
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">© 2017 Bettina Bremm</p>
<p id="link-back"><a href="../work/index.html" onclick="self.close()">back to heartcube</a></p>
</body>
</html>
あなたの 'viewport'メタタグはどこですか? – CBroe
私は愚かで非常に迅速に解決されたうーん、私はそれを忘れてしまった、おかげで、私は数日間気づかなかっただろう – heartcube