CSS 媒体查询无法在我的浏览器上运行

Question

我正在使用 CSS 和 flexbox 构建一个响应式网站，运行我的@media 查询出现问题。当最小宽度值达到 992 像素时，媒体查询应该产生变化。（即文本应移动到图像的右侧）。我多次查看它并尝试运行在多个浏览器上使用它，但似乎仍然无法弄清楚。任何帮助将不胜感激。

//main.css

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700i');

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

body {
    font-family: 'Roboto Mono', monospace;
}

:root {
    --light: #fff;
    --dark: #181b24;
    --grey: #899495;
    --orange: #fc5130;
    --SectionGrey: #f2f2f2;
    --SectionWhite: #fff;
}

/* nav*/
.nav {
    background: var(--light);
}

/*end of nav*/
/*header*/
.header {
    min-height: 100vh;
    background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(./img/header-bcg.jpeg)center/cover fixed no-repeat;
    flex-direction: column;

}

/*end of header*/
/*banner*/
.banner {
    /* as a flex child*/
    flex: 1 0 auto;
    /*as a flex parent*/
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: var(--dark);
    text-align: center;
    padding-bottom: 4rem;
    font-weight: 700;
}

.banner__title {
    font-size: 4em;
    letter-spacing: 0.15rem;
    margin-bottom: 0.5 rem;
    font-style: italic;
    text-transform: capitalize;

}

.banner__jobs {
    letter-spacing: 0.15rem;
    text-transform: capitalize;
    font-size: 1.5rem;
    color: var(--light);
}

/*end of banner*/
/*about section*/
.about {
    padding: 2rem 0;
    background: var(--SectionWhite);

}

.about__center {
    max-width: 90vw;
    margin: 2rem auto;

}

.about-img-photo {
    margin: 3rem 0;
    position: relative;
}

.about-img__photo {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.about-img:before {
    content="";
    background: var(--grey);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -10px;
    left: -10px;
}

.about-info {
    margin: 3rem 0;
}

.about-info__title {
    font-size: 3rem;
    text-transform: capitalize;
    letter-spacing: 0.5rem;
    background: url('./img/title-bcg.svg')no-repeat;
}

.about-info__text {
    color: var(--grey);
    line-height: 1.5;
    font-size: 1.2rem;
    margin: 3rem 0;
}

.about-info__single-link {
    display: inline-block;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    text-transform: capitalize;
    border: 3px solid var(--dark);
    transition: all 1s linear;
    margin-right: 1rem;

}

.dark-btn {
    background: var(--dark);
    color: var(--light);
}

.dark-btn:hover {
    background: var(--light);
    color: var(--dark);
}

.light-btn {
    color: var(--dark);
}

.light-btn:hover {
    background: var(--dark);
    color: var(--light);
}

@media screen and(min-width:992px) {
    .about__center {
        display: flex;
        justify-content: space-between;
    }

    .about-info,
    .about-img {
        flex: 0 0 calc(50% - 1rem);
    }

    .about-info {
        display: flex;
        align-items: flex-end;
    }
}

/*end of about section*/

//index.html

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Portfolio</title>

    <!--main css-->
    <link rel="stylesheet" href="main.css">
    <!--font awewsome-->
    <script src="all.js"></script>
</head>

<body>
    <header class="header">
        <!--first child-->
        <nav class="nav"></nav>
        <!--second child-->
        <section class="banner">
            <!--banner container-->
            <div class="banner__container">
                <h1 class="banner__title">I'm a clever techie</h1>
                <h1 class="banner__jobs">developer<span><i class="fas fa-angle-double-right"></i></span>
                    designer
                    <span><i class="fas fa-angle-double-right"></i></span>
                    photographer</h1>
            </div>
        </section>
    </header>
    <!--end header-->
    <!--about section-->
    <section class="about"></section>
    <div class="about__center">
        <article class="about-img">
            <img src="img/header-bcg.jpeg" alt="" class="about-img__photo">
        </article>
        <article class="about-info">
            <div class="about-info__container">
                <h1 class="about-info__title">about me</h1>
                <p class="about-info__text">hah ahdh hqdh hqdhw hqdh hqfh hqfh hwfhdvh hwfdh whfb</p>
                <div class="about-info__links">
                    <a href="#" class="about-info__single-link dark-btn">hire me</a>
                    <a href="#" class="about-info__single-link light-btn">download CV</a>
                </div>
            </div>

        </article>

    </div>
    <!--end of about section-->

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

</html>

展开前的截图

浏览器扩展后window

预期输出

Answer 1

我检查了你的代码并做了一些修改：

我只使用了“@media”而不是“@media screen and...”
我用 'max-width' 而不是 'min-width'。

希望对您有所帮助！

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700i');

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

body {
    font-family: 'Roboto Mono', monospace;
}

:root {
    --light: #fff;
    --dark: #181b24;
    --grey: #899495;
    --orange: #fc5130;
    --SectionGrey: #f2f2f2;
    --SectionWhite: #fff;
}

/* nav*/
.nav {
    background: var(--light);
}

/*end of nav*/
/*header*/
.header {
    min-height: 100vh;
    background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url('https://killaexpeditions.com/wp-content/uploads/2018/03/inca-trail-machu-picchu-header.jpg')center/cover fixed no-repeat;
    flex-direction: column;

}

/*end of header*/
/*banner*/
.banner {
    /* as a flex child*/
    flex: 1 0 auto;
    /*as a flex parent*/
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: var(--dark);
    text-align: center;
    padding-bottom: 4rem;
    font-weight: 700;
}

.banner__title {
    font-size: 4em;
    letter-spacing: 0.15rem;
    margin-bottom: 0.5 rem;
    font-style: italic;
    text-transform: capitalize;

}

.banner__jobs {
    letter-spacing: 0.15rem;
    text-transform: capitalize;
    font-size: 1.5rem;
    color: var(--light);
}

/*end of banner*/
/*about section*/
.about {
    padding: 2rem 0;
    background: var(--SectionWhite);

}

.about__center {
    max-width: 90vw;
    margin: 2rem auto;

}

.about-img-photo {
    margin: 3rem 0;
    position: relative;
}

.about-img__photo {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.about-img:before {
    content="";
    background: var(--grey);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -10px;
    left: -10px;
}

.about-info {
    margin: 3rem 0;
}

.about-info__title {
    font-size: 3rem;
    text-transform: capitalize;
    letter-spacing: 0.5rem;
    background: url('./img/title-bcg.svg')no-repeat;
}

.about-info__text {
    color: var(--grey);
    line-height: 1.5;
    font-size: 1.2rem;
    margin: 3rem 0;
}

.about-info__single-link {
    display: inline-block;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    text-transform: capitalize;
    border: 3px solid var(--dark);
    transition: all 1s linear;
    margin-right: 1rem;

}

.dark-btn {
    background: var(--dark);
    color: var(--light);
}

.dark-btn:hover {
    background: var(--light);
    color: var(--dark);
}

.light-btn {
    color: var(--dark);
}

.light-btn:hover {
    background: var(--dark);
    color: var(--light);
}

@media(max-width:992px) {
    .about__center {
        display: flex;
        justify-content: space-between;
    }

    .about-info,
    .about-img {
        flex: 0 0 calc(50% - 1rem);
    }

    .about-info {
        display: flex;
        align-items: flex-end;
    }
}

/*end of about section*/

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Portfolio</title>

    <!--main css-->
    <link rel="stylesheet" href="main.css">
    <!--font awewsome-->
    <script src="all.js"></script>
</head>

<body>
    <header class="header">
        <!--first child-->
        <nav class="nav"></nav>
        <!--second child-->
        <section class="banner">
            <!--banner container-->
            <div class="banner__container">
                <h1 class="banner__title">I'm a clever techie</h1>
                <h1 class="banner__jobs">developer<span><i class="fas fa-angle-double-right"></i></span>
                    designer
                    <span><i class="fas fa-angle-double-right"></i></span>
                    photographer</h1>
            </div>
        </section>
    </header>
    <!--end header-->
    <!--about section-->
    <section class="about"></section>
    <div class="about__center">
        <article class="about-img">
            <img src="https://killaexpeditions.com/wp-content/uploads/2018/03/inca-trail-machu-picchu-header.jpg" alt="" class="about-img__photo">
        </article>
        <article class="about-info">
            <div class="about-info__container">
                <h1 class="about-info__title">about me</h1>
                <p class="about-info__text">hah ahdh hqdh hqdhw hqdh hqfh hqfh hwfhdvh hwfdh whfb</p>
                <div class="about-info__links">
                    <a href="#" class="about-info__single-link dark-btn">hire me</a>
                    <a href="#" class="about-info__single-link light-btn">download CV</a>
                </div>
            </div>

        </article>

    </div>
    <!--end of about section-->

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

</html>

Answer 2

'and' 和括号 '(' 之间没有 space，这就是它打破 css 的原因。如下所示放置 space，它应该适用于您自己的代码：

之前@media screen and(min-width:992px) {

更正 @media screen and (min-width:992px) {

CSS 媒体查询无法在我的浏览器上运行

CSS Media query not working on my browser

html

css

webpage

media-queries

flexbox