媒体查询在两个不同页面上的页脚有两个不同的结果，即使代码相同？

Question

我刚刚完成了主页的媒体查询。我做了其中的 3 个，一个最大宽度为 1024px，一个最大宽度为 724px，另一个最大宽度为 425px。我遇到的问题是 724px 显示屏（平板电脑显示屏）完成主页后，我开始将这些媒体查询复制到关于页面，因为导航和页脚在整个网站上是相同的。然而，关于页面上的页脚正在颠簸 - 此处显示：

下面的代码是主页，fiddle link 是关于页面。

https://jsfiddle.net/xqkweov4/3/

body, html {
 margin: 0;
 padding: 0;
}

/*---HEADER---*/

li a {
 text-decoration-line: none;
 color: rgba(102,102,102,0.75);
}

header {
 background: blue;
 height: 100vh;
 background-attachment: fixed;
}

nav {
 background-color: white;
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 2;
 box-shadow: 0px 0px 100px grey;
}

ul {
 margin-right: 30px;
 margin-top: 25px;
}

li {
 display: inline-block;
 font-size: 1.55rem;
 margin-right: 20px;
 font-family: 'Rajdhani';
}

li a:hover {
 cursor: pointer;
 color: #1a1a1a;
 transition: all 0.7s ease;
}

.after:after {
 position: relative;
 left: 12px;
 top: 2px;
 display: inline-block;
 content: "";
 width: 1px;
 height: 20px;
 background-color: rgba(102,102,102,0.25);
}

.logo { color: red;
 font-size: 3.7rem;
 margin: 10px;
 opacity: 1;
 margin-left: 30px;
}

.phrase {
 text-align: center;
 position: relative;
 top: 300px;
}

.phrase p {
 color: white;
 font-size: 3.5rem;
 font-family: 'Arvo';
 margin-bottom: 30px;

}

.phrase a {
 background-color: red;
 border-radius: 25px;
 color: white;
 font-family: 'Bitter';
 font-size: 1.8rem;
 padding-left: 15px;
 padding-right: 15px;
 padding-bottom: 10px;
 padding-top: 10px;
}

.phrase a:hover {
 background-color: #cc2900;
 transition: all 0.2s ease;
 cursor: pointer;
}

.phrase .fas {
 display: block;
 color: white;
 font-size: 3.5rem;
 margin-top: 15px;
}

/*---PROMISE---*/

.stats {
 width: 100%;
 display: flex;
 box-shadow: 0px 0px 150px grey;
 position: relative;
 z-index: 1;
 background-color: white;
}

.stats div {
 display: inline-block;
 flex-basis: 35%;
 text-align: center;
 padding-bottom: 30px;
}

.stat-info {
 font-size: 2rem;
 color: rgba(102,102,102, 1);
 font-family: 'Rajdhani';
 margin-bottom: 0;
 margin-top: 10px;
}

.stat-num {
 color: red;
 font-family: 'Rajdhani';
 font-size: 3rem;
 margin: 0;
 font-weight: bolder;
}

.stats div:before {
 display: inline-block;
 content: '';
 width: 2px;
 height: 35px;
 background-color: rgba(102,102,102, 0.60);
}

.promise {
 width: 100%;
 background: blue;
 background-position: center;
 background-attachment: fixed;
 background-size: cover;
}

.promise .wrapper {
 width: 100%;
 background-color: rgba(0, 0, 0, 0.3);
}

.promise h1 {
 position: relative;
 top: 40px;
 color: white;
 font-family: 'Arvo';
 font-size: 3.5rem;
 text-align: center;
 margin-top: 0;
 word-spacing: 7px;
 text-shadow: 0px 0px 100px grey;
}

.promise p {
 color: white;
 font-size: 1.8rem;
 font-family: 'Rajdhani';
 margin-bottom: 0;
 padding-bottom: 60px;
 text-align: center;
 margin-top: 40px;
 padding-left: 50px;
 padding-right: 50px;
}

/*---FOOTER---*/

.footer .wrapper {
 display: flex;
}

.footer div {
 display: inline-block;
 flex-basis: 33.33%;
 font-family: 'Rajdhani';
 color: rgba(102,102,102, 1);
 margin-top: 5px;
}

.footer h1 {
 font-size: 2rem;
 margin-top: 15px;
}

.footer .inner {
 margin-left: 55px;
}

.social .inner {
 margin-left: 45px;
}

.contact .inner {
 margin-left: 35px;
}

.footer .inner:before {
 display: inline-block;
 content: '';
 width: 27.1%;
 height: 2px;
 background-color: rgba(102,102,102, 0.6);
 position: absolute;
 margin-top: 54px;
}


.links .inner:after {
 content: '';
 width: 10.5%;
 height: 2px;
 background-color: red;
 position: absolute;
 margin-top: -151px;
}

.social .inner:after {
 content: '';
 width: 5.8%;
 height: 2px;
 background-color: red;
 position: absolute;
 margin-top: -171px;
}

.contact .inner:after {
 content: '';
 width: 7.5%;
 height: 2px;
 background-color: red;
 position: absolute;
 margin-top: -174.5px;
}

.wrap:before {
 content: '';
 width: 100px;
 height: 2px;
 background-color: red;
 position: absolute;
 margin-top: 55px;
}

.links a {
 display: block;
 text-decoration-line: none;
 color: rgba(102,102,102, 1);
 font-size: 1.2rem;
 position: relative;
 top: -10px;
 transition: color 0.4s ease;
}

.links a:hover {
 color: red;
}

.contact p {
 position: relative;
 top: -10px;
}

.social i {
 font-size: 1.7rem;
 margin-right: 5px;
 position: relative;
 top: -20px;
 color: rgba(102,102,102, 0.7);
 transition: all 0.4s ease;
}

.social i:hover {
 color: red;
 cursor: pointer;
}

#msg {
 margin-top: -15px;
}

.footer-textarea {
 background-color: rgba(102,102,102, 0.2);
 outline: none;
 color: rgba(102,102,102, 1);
 resize: none;
 width: 100%;
}

.footer button {
 position: absolute;
 margin-left: 23.2%;
 margin-top: -40px;
 border: none;
 font-family: 'Rajdhani';
 font-size: 1.2rem;
 transition: all ease 0.4s;
 outline: none;
}

button:hover {
 cursor: pointer;
 color: red;
}

.dark {
 color: red;
}

.copyright {
 position: absolute;
 background-color: white;
 text-align: center;
 width: 100%;
 margin-bottom: 0;
 font-size: 1.2rem;
 padding-bottom: 4px;
}



/*-------MEDIA QUERIES-------*/



@media screen and (max-width: 1024px) {
 
 /*---FOOTER---*/
 
 .footer .inner {
  margin-left: 30px;
 }

 .footer-textarea {
  width: 88%;
 }

 .footer button {
  margin-left: 22.25%;
 }

 .social .inner:after {
  width: 7.8%;
  margin-top: -80px;
  left: 36.25%;
 }

 .links .inner:after {
  width: 14%;
 }

 .contact .inner:after {
  width: 10%;
 }

}



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

 /*---FOOTER---*/

 .contact .inner:after {
  margin-top: -195px;
 }

 .social .inner:after {
  left: 37.25%;
 }

 .footer button {
  margin-left: 20%;
 }
}



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

 /*---NAV---*/

 .logo {
  font-size: 2.5rem;
  margin-left: 10px;
 }

 ul {
  margin: 0;
  padding: 0;
 }

 nav li {
  display: none;
 }

 .ham-menu {
  width: 55px;
  height: 55px;
  position: fixed;
  right: 0;
  top: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
 }

 .m1, .m2, .m3 {
  border-radius: 4px;
  margin: 4px;
  width: 40px;
  height: 5px;
  background-color: red;
  float: left;
 }

 /*---MAIN---*/

 header {
  height: 50vh;
 }

 .phrase {
  top: 175px;
 }

 .phrase p {
  font-size: 1.7rem;
  margin-bottom: 10px;
 }

 .phrase a {
  font-size: 1.3rem;
  padding: 7px;
 }

 .phrase .fas {
  margin-top: 10px;
  font-size: 2.5rem;
 }

 .stats p {
  font-size: 1.3rem;
 }

 .stats div {
  padding-bottom: 10px;
 }

 .stats div:before {
  height: 20px;
 }

 .promise h1 {
  font-size: 2rem;
 }

 .promise p {
  position: relative;
  top: 10px;
  font-size: 1.3rem;
 }

 /*---FOOTER---*/

 .footer .wrapper {
  display: flex;
  flex-direction: column;
 }

 .footer div {
  margin: 0;
 }

 .footer h1 {
  font-size: 2rem;
  margin-top: 10px;
 }

 .footer .inner {
  margin: 0;
 }

 .footer .inner:before {
  display: inline-block;
  content: '';
  width: 90%;
  height: 2px;
  background-color: rgba(102,102,102, 0.6);
  position: absolute;
  margin-top: 48px;
 }

 .links .inner:after {
  width: 33%;
  margin-top: -152px;
 }

 .social .inner {
  position: relative;
  top: -9.5px;
 }

 .social .inner:after {
  content: '';
  width: 18%;
  height: 2px;
  background-color: red;
  position: absolute;
  left: 0;
  margin-top: -43.75px;
 }

 .contact .inner:after {
  content: '';
  width: 24%;
  height: 2px;
  background-color: red;
  position: absolute;
  margin-top: -148px;
 }

 .links a {
  margin-left: 5px;
 }

 .social h1 {
  margin-bottom: 10px;
 }

 #msg {
  font-size: 1rem;
  margin-bottom: 0;
  margin-right: 25.5%;
  position: absolute;
  right: 5px;
  top: 80px;
 }

 .footer button {
  right: 9.25%;
  margin-top: 0.2px;
 }

 .social i {
  font-size: 1.8rem;
  margin-right: 2px;
  position: relative;
  top: -5px;
  left: 5px;
  color: rgba(102,102,102, 0.7);
  transition: all 0.4s ease;
 }

 .footer-textarea {
  width: 88.5%;
  margin-left: 5px;
 }

 .contact p {
  margin: 5px;
  font-size: 1.2rem;
 }

 .copyright {
  background-color: red;
 }

 .copyright span {
  color: white;
  background-color: red;
 }

}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, intitial-scale=1.0">
 <title>Kane Concrete & Construction LLC</title>
 <link rel="stylesheet" href="../css/style.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 <link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
 <div class="inner-wrap">
  <header>
   <nav>
    <div class="logo">
     <i class="fab fa-accusoft"></i>
    </div>

    <div class="nav">
     <div class="ham-menu">
      <div class="m1"></div>
      <div class="m2"></div>
      <div class="m3"></div>
     </div>
     <ul>
      <li class="after"><a href="index.html">Home</a></li>
      <li class="after"><a href="about.html">About</a></li>
      <li class="after"><a href="about.html#services">Services</a></li>
      <li class="after"><a href="careers.html">Careers</a></li>
      <li class="after"><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
     </ul>
    </div>
   </nav>
   
   <div class="phrase">
    <p>It all starts at the foundation.</p>
    <a>Get a Quote</a>
    <i class="fas fa-angle-down"></i>
   </div> 
  </header>

  <section class="stats">
   <div id="start-year">
    <p class="stat-info">Established</p><br>
    <p class="stat-num">2015</p>
   </div>

   <div id="projects">
    <p class="stat-info">Projects</p><br>
    <p class="stat-num">200+</p>
   </div>

   <div id="claims">
    <p class="stat-info">Insurance claims</p><br>
    <p class="stat-num">87%</p>
   </div>
  </section>

  <section class="promise">
   <div class="wrapper">
    <h1>Our Promise</h1>

    <p><span style="color: red;">W</span>e believe that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum doloremque impedit laudantium magnam eos quae ipsum, rem, dolorum saepe laboriosam ipsam nobis architecto debitis, vel aut provident tenetur perferendis, aliquid commodi magni sequi hic quia nemo! Nam odio fugiat, similique eum saepe. Laboriosam officiis delectus reiciendis, est tenetur voluptates ducimus! Ducimus enim dolor, eos id porro, amet culpa alias sunt reprehenderit necessitatibus deserunt eum. Sunt quia accusamus facilis quo, cum maiores nam illum sit quisquam, tempora fugit? Quod voluptate debitis voluptatum illo. Est, rerum sequi. Corporis atque incidunt placeat aliquam error veniam quis, minus voluptatem, qui, a pariatur voluptatibus, ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe labore aliquid magnam velit, nisi consequuntur!</p>
   </div>
  </section>
 </div>

 <section class="footer">
  <div class="wrapper">
   <div class="links">
    <div class="inner">
     <h1>Quick Links</h1>

     <a href="#">Home</a>
     <a href="#">About</a>
     <a href="#">Services</a>
     <a href="#">Job Openings</a>
     <a href="#">Gallery</a>
    </div>
   </div>

   <div class="social">
    <div class="inner">
     <h1>Social</h1>

     <i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
     <i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
     <i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

     <p id="msg">Send some feedback!</p>
     <button name="msg">Send</button>
     <textarea name="msg" class="footer-textarea" cols="46" rows="5" placeholder="type here..."></textarea>
    </div>
   </div>

   <div class="contact">
    <div class="inner" class="wrap">
     <h1>Contact</h1>

     <p>(208)546-7827 - <span class="dark">Matt</span></p>
     <p>(208)546-7827 - <span class="dark">Keegan</span></p>
     <p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
     <p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
    </div>
   </div>
  </div>
  
  <div class="copyright"><span>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
 </section>
</body>
</html>

Answer 1

看起来问题是由您的 CSS 的差异引起的。在您在 jsfiddle .footer .inner:before 中提供的示例中，宽度为 360px。在上面的代码中，同一伪元素的宽度为 90%。不幸的是，简单地解决这个问题并不能解决问题，因为您似乎正在将一大堆不同的 CSS 应用到相关页面。如果您将媒体查询应用于具有不同 CSS 的页面，您将不会总是获得相同的效果。你关于页面上的问题对我来说似乎不仅仅是平板电脑。

对整个站点使用一个样式表可能会更好，这样您就不必每次都将内容复制到每个页面。许多站点只有一个核心样式表，尽管它通常是从较小的模块化样式表编译而来的。

快速解决方法是添加以下内容 CSS:

html,
body {
  overflow-x: hidden;
}

这只是隐藏了溢出问题，并没有真正解决根本问题，但是我不想深入探讨您的 CSS，因为这是一个应该通过创建一些一致的页脚 [=20] 来解决的问题=].

媒体查询在两个不同页面上的页脚有两个不同的结果，即使代码相同？

Media query has two different results for the footer on two different pages even though the codes the same?

html

css

media-queries

css-tables