Question

我正在练习使用@media查询。这是我的HTML的一部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/script.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="img/sprite.svg" type="image/svg+xml">
</head>
<body>
    <header class="page-header">
        <div class="page-header__logo-wrap">
            <a href="/" class="page-header__logo-link">
             <svg class="page_header__tablet-logo" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 147 40" width="147" height="40" id="logotype-white-tablet" y="1948"><image id="logotype-white-tablet-logotype-white-tablet.svg" width="147" xlink:href="data:img/png;base64,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" height="40"/></svg>
            </a>
            <a href="/" class="page-header__logo-link">
            <img src="img/logo_mobile.png" id="mobile-logo">
            </a>
            <a href="" class="main-nav__toggle">
            </a>
        </div>
        <div class="page-header__nav-wrap">
            <nav class="main-nav">
                <ul class="main-nav__list">
                    <li class="main-nav__items main-nav__item--active"><a href="#">Главная</a></li>
                    <li class="main-nav__items"><a href="#">Фотографии</a></li>
                    <li class="main-nav__items"><a href="#">Конкурс</a></li>
                    <li class="main-nav__items"><a href="#">Блог</a></li>
                </ul>
            <a href="#" class="main-nav__toggle main-nav__toggle--close"></a>
            </nav>
        </div>
     </header>

这是CSS的一部分：

.main-nav,
.promo-download__button,
.price-table__headers,
.phone__text,
.mail-text,
.map-block__text {
  font-family: "Open Sans";
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  min-width: 700px;
  font-family: "Open Sans";
  background-image: url("../img/background.jpg.jpg");
  background-repeat: no-repeat;
  margin: 0;
}
.page-header {
  position: relative;
  width: 100%;
  height: 114px;
  display: flex;
  justify-content: space-between;
  background-color: rgba(30, 39, 50, 0.63);
}
.page-header #mobile-logo {
  display: none;
}
.page-header__nav-wrap {
  position: relative;
}
.page-header img {
  margin-left: 40px;
  margin-top: 34px;
}
#logotype-white-tablet {
  transform: translateX(39px) translateY(32px);
}
.page-header::after {
  content: "";
  background-repeat: no-repeat;
  background-image: url('icons/icons.svg');
  background-position: 0 -2001px;
  width: 59px;
  height: 24px;
  margin-top: 46px;
  margin-right: 40px;
}
.main-nav {
  display: flex;
  display: none;
  position: absolute;
  top: 114px;
  left: -431px;
  width: 100%;
  height: 255px;
  background-color: #283645;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 18px;
  line-height: 32px;
}
.main-nav__items {
  list-style-type: none;
  flex-grow: 1;
}
.main-nav__items a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  margin-top: 14px;
}
.main-nav__items::before {
  background-color: #283645;
}
.main-nav__toggle--close {
  position: absolute;
  top: 0;
  font-size: 0;
  border: 0;
  cursor: pointer;
  width: 22px;
  height: 22px;
  top: -66px;
  left: 637px;
}
.main-nav__toggle {
  position: absolute;
  font-size: 0;
  border: 0;
  cursor: pointer;
  width: 47px;
  height: 31px;
  display: block;
  left: 601px;
  top: 43px;
}
.main-nav__toggle--close::before,
.main-nav__toggle--close::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 5px;
  background-color: #ffffff;
  border-radius: 1px;
}
.main-nav__toggle::before {
  transform: rotate(226deg);
}
.main-nav__toggle::after {
  transform: rotate(136deg);
}
.main-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space--around;
  background-color: #1e2732;
  margin: 0 auto;
  width: 100%;
}
.main-nav__list li {
  flex-grow: 1;
  flex-shrink: 1;
  margin-top: 2px;
  background-color: #283645;
  text-align: center;
  width: 107%;
  box-shadow: 0 0 2px #050505;
}


  @media only screen and (max-width: 320px) {
  html,
  body {
    margin: 0;
    padding: 0;
  }
  body {
    background-image: url("../img/background-mobile.jpg");
  }
  .page-header {
    width: 100%;
    height: 66px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
  }
  #mobile-logo {
    display: block !important;
    position: absolute;
    top: -9px;
    left: -15px;
    z-index: 1;
  }
  #logotype-white-tablet {
    display: none;
  }
  .promo-download__title {
    display: none;
  }
  .os-nav {
    display: none;
  }
  .os-nav__title {
    display: none;
  }
}

当我将窗口大小调整为320px（或使用chrome toggle-device模式并将其设置为iphone）时@media查询可以工作，但似乎视口没有。我仍然可以看到水平滚动条和700px宽度的“大”标题部分。我已经阅读并尝试了大多数决定，例如：

在此问题中添加元标记（逐个）以及与此问题相关的其他元素：My meta viewport doesn't work
添加特定宽度：

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

或者也许视口不是主要问题，我在CSS网格构建中犯了错误？

Answer 1

不要将HTML body修改为min-width: 700px;，而是使用百分比作为宽度。如果您强行设置页面宽度，则媒体查询规则content="width=device-width, initial-scale=1"将不起作用：

例如：

body { min-width: 75%; }

您还可以使用各种CSS框架来处理所有这些（以及许多其他）问题，例如Bootstrap 3，Zurb Foundation等。

Answer 2

在CSS中，您正在添加

body {min-width：700px; }

即使您的屏幕是320px，这也会使您的部分修复为700px。尝试将body的宽度更改为更小的宽度或将它们设置为百分比：

body {min-width：320px; }

或

body {min-width：90％; }

视口不起作用

2 个答案: