Question

所以我希望页面底部的链接在小于580px的屏幕上显示更大的字体大小（显然几乎应该是所有手机屏幕）。

如果我在开发工具中检查它并更改宽度，它看起来很像

但是一旦我使用'手机屏幕模式'，例如iPhone 5，它又恢复到25px的正常字体大小，媒体查询应该增加多少？

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{
	color: #666666;
	font-family: Raleway;
	font-weight: bold;
	text-decoration: none;
    float: none;
	text-align: center;
	padding-top: 10px;
	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>
	<title>Typographic Pairing</title>
	<link rel="icon" type="image/png" href="../img/heart.png">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
	<link rel="stylesheet" href="main.css">
	<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>

Answer 1

正如@CBroe注意到的那样，视口缺少元标记！

<meta name="viewport" content="width=device-width, initial-scale=1.0">

媒体查询无法在移动设备

1 个答案: