CSS 媒体查询帮助答案

【问题标题】：CSS media queries assistanceCSS 媒体查询帮助
【发布时间】：2022-01-02 11:36:48
【问题描述】：

我正在做一个练习项目来学习 CSS 和 HTML 的一些核心基础。目前，我无法让我的网页响应媒体查询，我还有其他可以使用媒体查询的项目，但具体来说，这个项目不是，有什么解决方案吗？

<!DOCTYPE html>
<link rel="stylesheet" href="resumecss.css">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <body>
<title></title>
<meta name="description" content="Our first page">
<div class="box">
<img class="chung" src="chungus.png">
<h1 class="top">Cameron Marshall</h1>
</div>
<div class="container">
    <div class="a">Contact Info:</div>
    <div class="b">Skills:</div>
    <div class="c">Objective:</div>
    <div class="d">Work Experience:</div>
    <div class="e"></div>
</div>
</body>
</head>
</html>

    body{
        margin:0;
        padding:0;
        height:100%;
    }
    .box{
        background-color:lightblue;
        height:350px;}
    img{
        height:200px;width:200px;
        border-radius:50%;
        border:solid 2px black;
        display: block;
        margin-left: auto;
        margin-right: auto;
        background-color:white;
        position:relative;
        top:20px;}
    .top{
        text-align:center;
        font-size:4rem;
        position:relative;
        top:20px;}
    .container{
        max-width:100%;
        margin-left: auto;
        margin-right: auto;}
    .container{
        width:50%;
        height:100%;
        border: 8px solid black;
        display:flex;
        flex-wrap: wrap;
        }
    .a{
        width:100%;
        height:200px;
        background-color:grey;}
    .a {text-align:center;}
    .b{
        width:50%;
        height:600px;
        background-color:lightgrey;}
    .c{
        width:50%;
        height:600px;
        background-color:lightgrey
        ;}
    .d{
        width:100%;
        height:400px;
        background-color:white;}
    .e{
        width:100%;
        height:200px;
        background-color:grey;}
    @media screen and(max-width:500px){
        h1{color:blue;}}

***我试图在最小化到 500 像素以下时更改标题文本的颜色，即使使用基本设计，我似乎也无法让任何媒体查询工作。 ***

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

原来这里缺少一个空格：

@media screen and (max-width:500px) {
                 ^

你有：

@media screen and(max-width:500px) {

注意and(之间没有空格。

有时是小事……

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.box {
  background-color: lightblue;
  height: 350px;
}

img {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  border: solid 2px black;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  position: relative;
  top: 20px;
}

.top {
  text-align: center;
  font-size: 4rem;
  position: relative;
  top: 20px;
}

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container {
  width: 50%;
  height: 100%;
  border: 8px solid black;
  display: flex;
  flex-wrap: wrap;
}

.a {
  width: 100%;
  height: 200px;
  background-color: grey;
}

.a {
  text-align: center;
}

.b {
  width: 50%;
  height: 600px;
  background-color: lightgrey;
}

.c {
  width: 50%;
  height: 600px;
  background-color: lightgrey;
}

.d {
  width: 100%;
  height: 400px;
  background-color: white;
}

.e {
  width: 100%;
  height: 200px;
  background-color: grey;
}

@media screen and (max-width:500px) {
  h1 {
    color: blue;
  }
}

<!DOCTYPE html>
<link rel="stylesheet" href="resumecss.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <body>
    <title></title>
    <meta name="description" content="Our first page">
    <div class="box">
      <img class="chung" src="chungus.png">
      <h1 class="top">Cameron Marshall</h1>
    </div>
    <div class="container">
      <div class="a">Contact Info:</div>
      <div class="b">Skills:</div>
      <div class="c">Objective:</div>
      <div class="d">Work Experience:</div>
      <div class="e"></div>
    </div>
  </body>
</head>

</html>

【讨论】：

谢谢你！非常感谢，似乎就是这样。