堆棧內存溢出
  簡體   English   中英

CSS 網格不會通過媒體查詢變成 5 列

[英]CSS grid is not turning into 5 columns with media queries

 原文  2021-07-19 08:25:25  7   1    javascript/ html/ css

問題描述

我有一個反應組件，我在其中使用了styled-components 。 請查看本文底部的 HTML 版本。 在這個組件中， ListingContainer最初有 6 列。 當瀏覽器的寬度達到1080px時，我想將其設為 5 列。 我正在使用grid-template-columns: repeat(5, 1fr); 但是當我在 chrome 瀏覽器中檢查它時，它在 css 代碼中顯示了 5 列，但在顯示/瀏覽器上它仍然顯示了 6 列。 我怎樣才能解決這個問題並使它工作？

這是我的反應組件。

import "./styles.css";
import styled from 'styled-components';
import { Link } from 'react-router-dom';

const ListingWrapper = styled.div`
    max-width: 1366px;
    font-family: Roboto;
`;

const ListingContainer = styled.div`
    box-sizing: border-box;
    max-width: 1196px;
    margin: 10px auto 0;
  padding: 40px 100px;
    background-color: #ffffff;
    display: grid;
    grid-template-columns: repeat(6, 1fr); // here columns are 6.
    grid-template-rows: 1fr auto;
    grid-gap: 10px;
    @media (max-width: 1080px) {
    grid-template-columns: repeat(5, 1fr); // Here I am resetting columns to 5 but it is not working.
    }

    @media (max-width: 840px) {
    padding: 40px 14px;
    }
`;

const ProductContainer = styled(Link)`
    display: block;
    width: 140px;
    text-decoration: none;
    border: 1px solid #D8D8D8;
`;

const ImageFigure = styled.figure`
    margin: 0;
  padding: 0;
`;

const ProductImage = styled.img`
    width: 100%;
`;

const Caption = styled.figcaption`
    padding: 10px;
`;

const ProductTitle = styled.span`
    font-weight: 500;
    font-size: 12px;
    color: #4D4D4D;
`;

const ProductPrice = styled.span`
    display: block;
    margin-top: 10px;
    font-weight: 700;
    font-size: 14px;
    color: #E01A1A;
`;

const App = () => {
    return (
        <ListingWrapper>
            <ListingContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
            </ListingContainer>
        </ListingWrapper>
    );
}

export default App;

這是代碼和框鏈接。

https://codesandbox.io/s/hopeful-colden-tmjr6?file=/src/App.js:0-3033

更新

這是此代碼的 html 版本。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      .listingWrapper {
        max-width: 1366px;
        font-family: Roboto;
      }

      .listingContainer {
        box-sizing: border-box;
        max-width: 1196px;
        margin: 10px auto 0;
        padding: 40px 100px;
        background-color: #ffffff;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr auto;
        grid-gap: 10px;
        @media (max-width: 1080px) {
          grid-template-columns: repeat(5, 1fr);
        }

        @media (max-width: 840px) {
          padding: 40px 14px;
        }
      }

      .productContainer {
        display: block;
        width: 140px;
        text-decoration: none;
        border: 1px solid #d8d8d8;
      }

      figure {
        margin: 0;
        padding: 0;
      }

      img {
        width: 100%;
      }

      figcaption {
        padding: 10px;
      }

      .productTitle {
        font-weight: 500;
        font-size: 12px;
        color: #4d4d4d;
      }

      .productPrice {
        display: block;
        margin-top: 10px;
        font-weight: 700;
        font-size: 14px;
        color: #e01a1a;
      }
    </style>
  </head>
  <body>
    <div class="listingWrapper">
      <div class="listingContainer">
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
  </body>
</html>

這是沙箱鏈接

https://codesandbox.io/s/magical-grass-vfvqz?file=/index.html:0-3602

1 個解決方案

解決方案1
 0  2021-07-19 09:19:22

媒體查詢不應附加在單個類中。 您應該將它放在類選擇器之外，但在樣式標簽內，並將您的響應式樣式包裝在類選擇器中以用於特定的媒體查詢寬度

嘗試用以下內容替換您的樣式： 

 <style> @media (max-width: 1080px) { .listingContainer { grid-template-columns: repeat(5, 1fr) !important; } } @media (max-width: 840px) { .listingContainer { padding: 40px 14px !important; } } .listingWrapper { max-width: 1366px; font-family: Roboto; } .listingContainer { box-sizing: border-box; max-width: 1196px; margin: 10px auto 0; padding: 40px 100px; background-color: #ffffff; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr auto; grid-gap: 10px; } .productContainer { display: block; width: 140px; text-decoration: none; border: 1px solid #d8d8d8; } figure { margin: 0; padding: 0; } img { width: 100%; } figcaption { padding: 10px; } .productTitle { font-weight: 500; font-size: 12px; color: #4d4d4d; } .productPrice { display: block; margin-top: 10px; font-weight: 700; font-size: 14px; color: #e01a1a; } </style>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS網格系統或媒體查詢 CSS-1140px網格-IE 7,8問題-媒體查詢 根據媒體查詢打開和關閉腳本？ CSS媒體查詢和JavaScript 增量CSS媒體查詢 在jQuery中匹配CSS媒體查詢 HTML/CSS 中的媒體查詢問題 jQuery無法與CSS媒體查詢一起使用 jquery 媒體查詢更改了 css 為css媒體查詢添加重要信息
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM