为什么我的媒体查询在我的代码中不起作用？

问题描述 投票：0回答：3

我对html cs相当陌生，并开始构建一个登陆页面，该页面是我从前端导师挑战中获得的，如下所示。到目前为止，它在台式机上看起来不错。

Coming soon landing page

但是，我在使其响应速度方面遇到困难。我试图将网格模板的列更改为行，但这只是行不通。为什么会这样？

这是我的代码

<!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">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <nav class="top-img">
        <div class="container"> 
    <img src="./images/logo.svg" class="navbar-brand" alt="#">
</div>
</nav>

<!-- Section hero-->
<section id="hero">
    <div class="grid">
        <div class="hero-text">
            <h1>We're<span> Coming Soon</span></h1>
            <p>Hello fellow shoppers! We're currently building our new fashion store. Add your email below to stay up-to-date with announcements and or launch deals.</p>
            <div class="icons">
                <i class="fas fa-chevron-right"></i>
            <input type="text" placeholder="Email Address">
        </div>
        </div>
        <div class="hero-img">
            <img src="./images/hero-desktop.jpg" alt="#">
        </div>
    </div>
</section>

<script src="https://kit.fontawesome.com/732aafddc7.js" crossorigin="anonymous"></script>
</body>
</html>


@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600&display=swap');  

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

:root {

    /* primary */
    --desaturated-color: hsl(0, 36%, 70%);
    --soft-red: hsl(0, 93%, 68%);
    /*neutral*/
    --dark-red: hsl(0, 6%, 24%);
    /* font size - body: 16px */
    --body-font: 16px;

}

.container {
    /*max-width: 1200px;*/
    padding: 2rem 3rem;
}



#hero {
    background: url(../images/bg-pattern-desktop.svg) no-repeat center center/cover;
    height: 100vh;
    position: relative;
    overflow: auto;
}

.navbar-brand {
    padding-left: 3rem;
}

.hero-text {
    width: 60%;
    display: block;
    padding-top: 3rem;
    margin-top: 10rem;
    margin-left: 6rem;
}

.hero-text h1 {
    text-transform: uppercase;
    color: var(--desaturated-color);
    font-size: 3.5rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    letter-spacing: 20px;
    margin-bottom: 1.5rem;
}

.hero-text p {
      font-size: var(--body-font);
      color: var(--desaturated-color);
     margin-bottom: 2rem;
     line-height: 2;
}
.hero-text span {
    color: var(--dark-red);
    font-weight: 600;
}

.top-img {
    position: absolute;
    z-index: 1;
}

.hero-img img {
     width: 100%;
     height: 100vh;
}

.grid {
    display: grid;
    grid-template-columns: 3fr 2fr;

}

input[type=text] {
    width: 100%;
    padding: 1rem;
    border-radius: 25px;
    border: 1px solid var(--desaturated-color);
    border-color: var(--desaturated-color);
}

::placeholder {
    color: var(--desaturated-color);
}

.icons {
    position: relative;
}

.icons i {
    position: absolute;
    top: 1px;
    right: 0px;
    color: #fff;
    background: linear-gradient(135deg,  hsl(0, 80%, 86%),  hsl(0, 74%, 74%));
    padding: 0.5rem 3rem;
     height: 100%;
    font-size: 1.5rem;
    border-radius: 25px;
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .grid {
        grid-template-rows: 3fr 2fr; 
    }
}
html css responsive-design media-queries
3个回答
0
投票

您在CSS中指定grid-template-columns: 3fr 2fr;，而没有媒体查询；因此，它在768px（而不是grid-template-rows）以下的屏幕上使用此样式。可以通过在媒体查询中添加以下内容来轻松解决此问题：grid-template-columns: none;

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600&display=swap');  

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

:root {

    /* primary */
    --desaturated-color: hsl(0, 36%, 70%);
    --soft-red: hsl(0, 93%, 68%);
    /*neutral*/
    --dark-red: hsl(0, 6%, 24%);
    /* font size - body: 16px */
    --body-font: 16px;

}

.container {
    /*max-width: 1200px;*/
    padding: 2rem 3rem;
}



#hero {
    background: url(../images/bg-pattern-desktop.svg) no-repeat center center/cover;
    height: 100vh;
    position: relative;
    overflow: auto;
}

.navbar-brand {
    padding-left: 3rem;
}

.hero-text {
    width: 60%;
    display: block;
    padding-top: 3rem;
    margin-top: 10rem;
    margin-left: 6rem;
}

.hero-text h1 {
    text-transform: uppercase;
    color: var(--desaturated-color);
    font-size: 3.5rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    letter-spacing: 20px;
    margin-bottom: 1.5rem;
}

.hero-text p {
      font-size: var(--body-font);
      color: var(--desaturated-color);
     margin-bottom: 2rem;
     line-height: 2;
}
.hero-text span {
    color: var(--dark-red);
    font-weight: 600;
}

.top-img {
    position: absolute;
    z-index: 1;
}

.hero-img img {
     width: 100%;
     height: 100vh;
}

.grid {
    display: grid;
    grid-template-columns: 3fr 2fr;

}

input[type=text] {
    width: 100%;
    padding: 1rem;
    border-radius: 25px;
    border: 1px solid var(--desaturated-color);
    border-color: var(--desaturated-color);
}

::placeholder {
    color: var(--desaturated-color);
}

.icons {
    position: relative;
}

.icons i {
    position: absolute;
    top: 1px;
    right: 0px;
    color: #fff;
    background: linear-gradient(135deg,  hsl(0, 80%, 86%),  hsl(0, 74%, 74%));
    padding: 0.5rem 3rem;
     height: 100%;
    font-size: 1.5rem;
    border-radius: 25px;
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: none; /* ADD THIS */
        grid-template-rows: 3fr 2fr; 
    }
}
<body>
    <nav class="top-img">
        <div class="container"> 
    <img src="https://via.placeholder.com/100x100" class="navbar-brand" alt="#">
</div>
</nav>

<!-- Section hero-->
<section id="hero">
    <div class="grid">
        <div class="hero-text">
            <h1>We're<span> Coming Soon</span></h1>
            <p>Hello fellow shoppers! We're currently building our new fashion store. Add your email below to stay up-to-date with announcements and or launch deals.</p>
            <div class="icons">
                <i class="fas fa-chevron-right"></i>
            <input type="text" placeholder="Email Address">
        </div>
        </div>
        <div class="hero-img">
            <img src="https://via.placeholder.com/200x500" alt="#">
        </div>
    </div>
</section>

<script src="https://kit.fontawesome.com/732aafddc7.js" crossorigin="anonymous"></script>
</body>

JSFiddle

0
投票

在媒体查询时，将此行添加到grid-template-rows下：

grid-template-columns：无；

您必须覆盖指定的列，否则它也将应用于响应版本。

-1
投票

首先响应重置网格列，然后应用行，它将起作用

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.