Question

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

// 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>

扩展前的屏幕截图

浏览器窗口扩展后

预期产量

Answer 1

我已经检查了您的代码，并进行了一些更改：

我只用了'@media'而不是'@media screen and ...'
我使用“最大宽度”而不是“最小宽度”。

希望有帮助！

@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'和方括号'（'之间没有空格，这是它破坏CSS的原因。请如下所示放置空格，它应该与您自己的代码一起使用：

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

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

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

2 个答案: