简单 html 没有 phone 响应，无法弄清楚为什么

Question

我开发了这个非常简单的网站。我使用了此处类似问题中提供的所有编码和技巧，但没有成功。网络运行正常并经过验证，但 div 不会调整大小以适合手机。任何人都可以快速浏览一下并给我一些指示吗？非常感谢。

这里是 HTML 代码：

@import url(//db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light);

@font-face {
  font-family: "Adieu Light";
  src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot");
  src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot?#iefix") format("embedded-opentype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff2") format("woff2"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff") format("woff"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.ttf") format("truetype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.svg#Adieu Light") format("svg"); 
}

.body, html {

    height: 100%;
  margin: 0;
  background-image: url("Home-bck.jpg");
  background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.full {
    padding: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%)translateY(-50%)


}
.tromper {
    display: flex;
  justify-content: center;
  margin-top: auto;
  margin-bottom: 0px;
    color: #686868;
    font-family: adieu light;
    font-size: 28px;
}
.better {
    display: flex;
    justify-content: center;
    margin-top: -39px;
    color: #707070;
    font-family: Adieu light;
} 
.social ul {
    display: flex;
    position: absolute;
    justify-content: center;
    right: 50%;
    left: 44%;
    list-style: none;
}
.social ul li {
    margin-top: 0;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 30px;
}
.social ul li .fa {
  font-size: 70px;
  line-height: 60px;
  color: #626262;
  }

.social ul li .fa-instagram:hover {
  color: #bfeefd; 
  transition: .5s;
  transform: translate(0, -10px) rotate(360deg); 
}

.social ul li .fa-linkedin:hover {
  color: #bfeefd; 
  transition: .5s;
  transform: translate(0, -10px) rotate(360deg);

}
.Contact {
    display: flex;
    justify-content: center;
    margin-top: 70px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    color: #626262;
    font-family: Adieu Light;
    font-size: 24px;
        }

.clients {

   display: flex;
    justify-content: center;

}

/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
img { max-width: 100%; height: auto; 

}

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}
html { font-size:100%; }

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} }

 <!DOCTYPE html>
    <html>
        <head>
            <style></style>
            <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="HandheldFriendly" content="true">
        <meta charset="utf-8">
        <title>Tromper&amp;Tromper</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <link href="https://db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body>
        <div class="full container">
          <div class="tromper">
            <h1>TROMPER&amp;TROMPER</h1>
          </div>
          <div class="better">
            <h3>"BETTER TOGETHER"</h3>
          </div>
          <div class="social">
            <ul>
              <li>
                <a href="https://www.instagram.com/tromperandtromper/?hl=es" target="_blank">
                  <i class="fa fa-instagram"></i>
                </a>
              </li>
              <li>
                <a href="https://www.linkedin.com/company/tromper-and-tromper-works" target="_blank">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
          </div>
          <a href="mailto:whatever@whatever.com" style="text-decoration:none" target="_blank">
            <div class="Contact">
              <h4>CONTACT US</h4>
            </div>
          </a>
          <div class="clients"></div>
        </div>
      </body>
    </html>

Answer 1

我会评论，因为我不确定这是否是正确的答案，但不幸的是我不被允许。

我不想冒犯您或您的经验水平，但您似乎不知道 css 是如何工作的？又或者你没看就直接复制了。

您使用媒体查询使网站的响应速度非常快。当然要看你的需求了。使 div 具有响应性的最简单方法是给它们一个带有 % 的宽度。因此，如果你给它们让我们说 90%，当屏幕（或 window）为 1000px 等时，它们只会得到 900px 宽。

当您使用媒体查询时，因为 div 可能需要更小或更大，或者您使用绝对数字（如像素左右），您还需要使用您的类和 ID。

现在在您的媒体查询中我看到两个 ID“primary”和“secondary”，因为您使用 # 声明这是一个 ID，而在您的 HTML 中我根本看不到任何 ID。那么浏览器应该如何知道在哪里应用你的 CSS?

现在，我不自称是专业 CSS 用户，所以“#primary”可能是某种特殊命令，但就目前而言，我想说至少有你的问题之一。

你也用了很多flex，我真的不知道为什么？您还可以在 HTML 上做一些工作，使用容器、部分、文章等，但那是另一回事了。

Answer 2

我同意 bibleblade，我想补充一点，你使用“screen”有时只是不添加它很奇怪。也许尝试与此保持一致。另外，通过添加“屏幕”，你是在说这只会看起来像这样，如果它在屏幕上，所以它不会在打印机上工作，这是非常不必要的，所以我只是删除“屏幕”所以它默认为“全部”和底部的最后一个媒体查询 font-size。是不必要的，因为你可以通过 vw 或 vh 使 font-size 相对于屏幕，或者只使用类似 clamp

的东西

Answer 3

您的 div 无法调整大小的原因是因为 h1 标签。您可以尝试修改您的 css 文件：

/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
    h1 {font-size: 7vw;} /* <- HERE */
}

但是，您的代码不是语义化的。随着时间的推移尝试改进它。

简单 html 没有 phone 响应，无法弄清楚为什么

Simple html not phone responsive, can't figure out why

html

css

responsive