css - 如何添加媒体查询以使图像的填充更小？

标签 css responsive-design media-queries screen-size

我正在做一个小画廊，我刚刚弄清楚如何使用 Salvattore(类似于 Masonry)。我遇到的问题是，当我缩小网页时，填充仍然是 10px，我希望它是 5px，这样所有 3 列仍然可见并且填充看起来仍然不错(有点像 Pinterest) .我尝试了媒体查询，但它不起作用。这是我的 HTML 和 CSS:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="salvattore.js">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>All Things Pink!</title>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true">PINKI</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-nav-demo">
                    <ul class="nav navbar-nav">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Sign Up</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container">
            <div class="jumbotron">
                <h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> The Image Gallery</h1>
                <p>Random beautiful images of my favorite color.. pink!</p>
            </div>

            <div id="grid" data-columns>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1496193574520-069d8f5c945e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1518691340140-512e66ce957b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1488953994029-e6a7ba3348f7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1495464205000-94ffda5a0064?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1504898770365-14faca6a7320?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1470165451736-166cb1cc909d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1429152937938-07b5f2828cdd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1445098693232-134135a7ccfa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1488895892452-8df3dbc55c68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1461439626172-c3b891456f2e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1292&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1533008093099-e2681382639a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1472850156196-0156e307c552?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1453070516881-ae11f3f6b1b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1519717993199-3b3da2425d64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1517148627138-c9728d76331c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1498588113594-33ad5b4d19b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1496372412473-e8548ffd82bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1475&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1490395930356-7e64acf16e23?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=633&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1479912649391-55173fe33de4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1516826049371-1e7856387270?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1514542996715-a1ff9ccfb039?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
            </div>
        </div>
    <script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="salvattore.js"></script>

</body>


body {
padding-top: 70px;
}

.jumbotron {
    color: rgb(255, 159, 146);
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
background-color: #FFF;
}

.jumbotron p {
    letter-spacing: 4px;    
}

.navbar-inverse {
    background-color: #f06464;
    border-color: #666;
}

.navbar-inverse .navbar-brand {
    color: #FFF;
}

.navbar-inverse .navbar-nav>li>a {
    color: #FFF;
}

#grid[data-columns]::before {
    content: 3 .column.size-1of3;
}

.column { 
    float: left;
}

.size-1of3 { 
    width: 33.333%; 
}

img {
    max-width: 100%;
    padding: 10px;
}

@media (max-width: 450px;) {
    img {
        padding: 5px;
    }
}

最佳答案

看起来您的@media 标签格式不正确。试试这个“@media only screen and”代替你的“@media”并检查这个 https://www.w3schools.com/cssref/css3_pr_mediaquery.asp 。希望这个帮助

body {
padding-top: 70px;
}

.jumbotron {
    color: rgb(255, 159, 146);
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
background-color: #FFF;
}

.jumbotron p {
    letter-spacing: 4px;    
}

.navbar-inverse {
    background-color: #f06464;
    border-color: #666;
}

.navbar-inverse .navbar-brand {
    color: #FFF;
}

.navbar-inverse .navbar-nav>li>a {
    color: #FFF;
}

#grid[data-columns]::before {
    content: 3 .column.size-1of3;
}

.column { 
    float: left;
}

.size-1of3 { 
    width: 33.333%; 
}

img {
    max-width: 100%;
    padding: 10px;
}

@media all and (max-width: 450px) {
    img {
        padding: 5px;
    }
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="salvattore.js">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>All Things Pink!</title>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true">PINKI</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-nav-demo">
                    <ul class="nav navbar-nav">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Sign Up</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container">
            <div class="jumbotron">
                <h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> The Image Gallery</h1>
                <p>Random beautiful images of my favorite color.. pink!</p>
            </div>

            <div id="grid" data-columns>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1496193574520-069d8f5c945e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1518691340140-512e66ce957b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1488953994029-e6a7ba3348f7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1495464205000-94ffda5a0064?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1504898770365-14faca6a7320?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1470165451736-166cb1cc909d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1429152937938-07b5f2828cdd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1445098693232-134135a7ccfa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1488895892452-8df3dbc55c68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1461439626172-c3b891456f2e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1292&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1533008093099-e2681382639a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1472850156196-0156e307c552?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1453070516881-ae11f3f6b1b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1519717993199-3b3da2425d64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1517148627138-c9728d76331c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1498588113594-33ad5b4d19b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1496372412473-e8548ffd82bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1475&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1490395930356-7e64acf16e23?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=633&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1479912649391-55173fe33de4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1516826049371-1e7856387270?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1514542996715-a1ff9ccfb039?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
            </div>
        </div>
    <script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="salvattore.js"></script>

</body>

关于css - 如何添加媒体查询以使图像的填充更小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54867473/

上一篇：css - 为什么 CSS 规则在 Chrome 检查器中显示为灰色

下一篇：php - css 脚本 opencart 与 php 文件

相关文章：

css - 包装 float DIVS 响应 View

css - 在移动设备上显示不正确/不同(响应)

ipad - 将 iPad 的纵向和横向模式的 css 分开的首选方法是什么？

css - HTML5 背景视频不断出现，带有媒体查询

jquery - 我已经使用 jquery 创建了单选按钮，现在我想使用 css 设置它们的样式

css - 覆盖 chrome 绝对定位左 :0

html - 嵌套链接重叠

html - 表格单元格内的 100% 高度 div 在 Firefox 上不起作用

javascript - 如何使用 javascript 调整网页的大小(宽度/高度)？

css - 如何在 css4 中使用已弃用设备宽度的视口(viewport)标签？

©2024 IT工具网  联系我们