Question

我正在尝试使用以下媒体查询更改徽标大小，但它不起作用。 display：none有效，但height和width属性不适用于以下媒体查询。那么下面的代码是什么问题。

  /* SMALL PHONES TO SMALL TABLETS 481 TO 767px */
@media only screen and (max-width: 767px) {
        .logo { 
        height: 20px; 
          }

}

/* SMALL PHONES FROM 0 TO 480px */
@media only screen and (max-width: 480px) {

}

CSS

*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    font-size: 20px;
    color: #555;
    font-family: 'Lato', 'Arial', sans-serif;
    background-color: #fff;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}

.row {
    max-width: 80%;
    margin: 0 auto;
}

/************** HEADER ***************/

header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.83), rgba(10, 189, 227, 0.21)), url(img/header-background.jpg);
    height: 200px;
    background-position: center;
    background-size: cover;
}

.logo {
    height: 100px;
    width: auto;
    float: left;
    margin: 10px 0 0 20px;
}

.main-nav,
.main-nav-right {
    margin-left: 22px;
}

.main-nav {
    float: left;
    list-style: none;
    margin-top: 15px;
}

.main-nav li {
    display: inline-block;
    margin-right: 22px;
}

.main-nav li:last-child {
    margin-right: 0;
}

.main-nav li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #cbc8c8;
    word-spacing: 2px;
    font-size: 80%;
    font-weight: 400;
}

.main-nav-right {
    float: right;
    list-style: none;
    margin-top: 15px;
    margin-right: 22px;
}


.main-nav-right li {
    display: inline-block;
    margin-right: 22px;
}

.main-nav-right li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #cbc8c8;
    word-spacing: 2px;
    font-size: 78%;
    font-weight: 400;
}

HTML

<!DOCTYPE html>
    <html lang="en">
       <head>
        <title>Blog</title>
        <meta charset="utf-8">
           <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400" rel="stylesheet">
           <link rel="stylesheet" type="text/css" href="css/other-css/grid.css">
           <link rel="stylesheet" type="text/css" href="css/other-css/normalize.css">
           <link rel="stylesheet" type="text/css" href="css/queries.css">
           <link rel="stylesheet" type="text/css" href="css/style.css">
           </head>
        <body>
            <div class="row">
                <header>
                    <nav>
                        <a href="#"><img src="https://www.freelogodesign.org/img/logo-ex-7.png" class="logo" alt="logo"></a>
                        <ul class="main-nav">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Add A Post</a></li>
                        </ul>
                            <ul class="main-nav-right">
                            <li><a href="#">Login</a></li>
                            <li><a href="#">Register</a></li>
                        </ul>
                    </nav>
                </header>

            </div> <!-- main row div -->
        </body>
    </html>

Answer 1

你忘了这个元：

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

以下是关于此meta：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

的说明

媒体查询不会更改徽标大小

1 个答案: