Question

我正在开发一种响应式表单，其中徽标所在的部分在被手机查看时必须隐藏。我的问题是媒体查询无法按预期方式工作，我也不明白为什么。在桌面上，它工作得很好。

HTML看起来像这样：

<section class="form_wrap">
<section class="cantact_info">
<section class="info_title">
        <div class="text-center">
        <img src="images/logo1.png" class="img-fluid" alt="logo" width="110" height="112">
        </div>
        <h2>Form</h2>
</section>

<form action="" class="form_contact">
        <h2>Ingreso</h2>
        <div class="user_info">
            <label for="names">Name *</label>
            <input type="text" id="names">

            <label for="password">Pass *</label>
            <input type="password" id="password">

            <input type="button" value="Send" id="btnSend">
        </div>
        </section>
</form>

我的CSS当前是这样：

@media only screen and (max-width: 800px) {
.cantact_info{
  display: none;
 }
}

.cantact_info::before{
  content: '';
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;

  background: orange;
  opacity: 0.9;
}

.cantact_info{
  width: 38%;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-size: cover;
  background-position: center center;
 }

Answer 1

<!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>Document</title>
    <style>
        .cantact_info::before {
            content: '';
            width: 100%;
            height: 100%;

            position: absolute;
            top: 0;
            left: 0;

            background: orange;
            opacity: 0.9;
        }

        .cantact_info {
            width: 38%;
            position: relative;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            background-size: cover;
            background-position: center center;
        }

        @media only screen and (max-width: 800px) {
            .cantact_info {
                display: none;
            }
        }
    </style>
</head>

<body>
    <section class="form_wrap">
        <section class="cantact_info">
            <section class="info_title">
                <div class="text-center">
                    <img src="images/logo1.png" class="img-fluid" alt="logo" width="110" height="112">
                </div>
                <h2>Form</h2>
            </section>

            <form action="" class="form_contact">
                <h2>Ingreso</h2>
                <div class="user_info">
                    <label for="names">Name *</label>
                    <input type="text" id="names">

                    <label for="password">Pass *</label>
                    <input type="password" id="password">

                    <input type="button" value="Send" id="btnSend">
                </div>
        </section>
        </form>
</body>
</html>

您需要将meta视口添加到head标签

并将媒体查询移到CSS文件的末尾，CSS样式将自上而下应用。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

您的@media查询被下一行覆盖。

Makefile

始终将@media查询放在CSS的末尾，以避免这种情况。

Answer 3

解决方案编号1：

您的媒体查询位于CSS的顶部，因此请尝试输入！important。

@media only screen and (max-width: 800px) {
.cantact_info{
  display: none !important;
 }
}

解决方案2：

Try add your media query at the end of the css, it will work.

响应式CSS与媒体查询

3 个答案: