在移动设备上查看时，HTML边距会缩小

Question

我尝试使用这里的一些帖子来调整移动设备的大小，但我似乎无法让它正常运行。当您在移动设备上查看网站时，边距会继续将所有元素推送到一起

/ * TEXT FORMATTING * /

    .introPar1 {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
            margin-left: 400px;
            margin-right: 400px;
            font-size: 30px;
    }

    .introPar1 h1 {
            text-align: center;
    }

    .contacts {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
            margin-left: 400px;
            margin-right: 400px;
            font-size: 30px;

     }

/ *移动格式* /

@media (max-width: 1100px) {
    introPar1 {
        margin-right: 20px;
        `enter code here`margin-left: 20px;
         }
}

@media (max-width: 750px) {
    body {
        margin-right: 5vw;
        margin-left: 5vw;
    }
}

@media (max-width: 500px) {
    body {
        margin-right: 2vw;
        margin-left: 2vw;
    }
}

Answer 1

您在此类移动设备上看到此页面

你需要像这样改变

然后增加导航栏宽度

（我试过宽度：1520px;对于Nav beacuse，这是你使用的背景图片尺寸）

Answer 2

您的代码存在许多问题。但是菜单的问题是因为li未达到a的高度。因此，列表项将堆叠在另一个之下，并且将在li下。李小于a。

在display:block上使用a。

此外，我从您的网站复制了代码，因此如果有其他人来寻找此答案，它就会在这里。试图清理一下但是你有一些我不理解的风格，比如.introPar1 { margin-left:400px;margin-right:400px}

无论如何，请参阅下面的代码

body img {
  max-width: 100%;
  height: auto;
}


/* TOP NAVIGATION */

nav ul li a {
  text-decoration: none;
  margin: 20px;
  padding: 20px;
  border-style: solid;
  border-color: grey;
  display: block;
}

nav ul li {
  float: left;
}

nav ul {
  list-style-type: none;
  float: left;
}

nav {
  background-color: #f2f2f2;
  padding: 10px;
  float: left;
  width: 100%;
  box-sizing: border-box;
}


/* NAV HOVER */

nav a:hover {
  background-color: blue;
  border-color: orange;
  border-style: solid;
  color: white;
  transition: .3s;
}


/* BANNER */

.banner {
  text-align: center;
}

.banner img {
  border-style: solid;
  border-width: 10px;
  border-color: #87CEEB;
}


/* BODY ELEMENTS */

.home {
  font-weight: bold;
  font-size: 20px;
}

.temp {
  text-align: center;
  margin: auto;
  padding: 20px;
}


/* BACKGROUND */

.bgimage img {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.5;
  position: fixed;
}


/* TEXT FORMATTING */

.introPar1 {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  font-size: 30px;
}

.introPar1 h1 {
  text-align: center;
}

.contacts {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  font-size: 30px;
}


/* MOBILE FORMATTING */

@media (max-width: 1100px) {
  introPar1 {
    margin-right: 20px;
    margin-left: 20px;
  }
}

@media (max-width: 750px) {
  body {
    margin-right: 5vw;
    margin-left: 5vw;
  }
  nav ul li a {
    margin: 5px;
    padding: 10px;
  }
}

@media (max-width: 500px) {
  body {
    margin-right: 2vw;
    margin-left: 2vw;
  }
  nav ul li {
    width: 100%;
  }
}

<div class="bgimage">
  <img src="http://via.placeholder.com/1200x1000">
</div>

<nav>
  <ul>
    <li class="home"><a href="index.php">Crafts LLC</a></li>
    <li><a href="about.php">About Us</a></li>
    <li><a href="contact.php">Contact Us</a></li>
  </ul>
</nav>
<div class="banner"><img src="http://via.placeholder.com/350x150"></div>


<div class="Intro">
  <article class="introPar1">
    <h1><b><u>CRAFTS LLC</u></b></h1>
    <br> Here at CRAFTS LLC, we offer you our 45 years of expertise of
    <br> home repair advisory and remodeling services
    <br>
    <br> We are also here to help you with your estimation service needs
    <br> and contractor referral services
    <br>
    <br> With CRAFTS LLC, you get both service and quality excellence.
    <br> You need to look no further for your home repair and remodeling needs/solutions
    <br>
  </article>
</div>

<div class="contacts">
  <p>Email to: craftsllc1@gmail.com or Call:813 347 7458</p>
</div>