Html 在屏幕模式下，站点太宽_Html_Css_Responsive Design

Html 在屏幕模式下，站点太宽

html css responsive-design

Html 在屏幕模式下，站点太宽,html,css,responsive-design,Html,Css,Responsive Design,我是一个新手，试图建立一个具有响应性设计的网站。在移动视图中，当它缩小到500px以下时，它的设计看起来绝对不错，但当放大时，由于某种原因，网站变得太宽，我得到了一个水平滚动条。我已经检查了我的代码，我看不出为什么它会这样做，因为我为主包装器div设置了一个固定的边距谁能告诉我我做错了什么非常感谢 CSS 头衔|家标题纯素泡菜 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXX

我是一个新手，试图建立一个具有响应性设计的网站。在移动视图中，当它缩小到500px以下时，它的设计看起来绝对不错，但当放大时，由于某种原因，网站变得太宽，我得到了一个水平滚动条。我已经检查了我的代码，我看不出为什么它会这样做，因为我为主包装器div设置了一个固定的边距

谁能告诉我我做错了什么

非常感谢

CSS


头衔|家
标题
纯素泡菜
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
经典酸面包
AXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
素食味噌拉面
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

避免使用

宽度：20vw，使用百分比，如宽度：20%
。您的虚拟文本太长，因此不会在下一行中断。只需在谷歌上搜索lorem ipsum，即可获得更真实的虚拟文本：）
您还可以调整项目，请参见以下示例：和本flex教程：
我的小建议：

尝试移动优先的方法
使用flexbox代替网格（为什么网格模板列：1fr；
？）
使用多个断点（例如引导）
在这里提问之前，请先进行研究。你在代码中犯了很多错误，这不是因为你是一个新手，而是因为你没有一步一步走。例如，我在编写代码的2个月里学习了媒体查询和网格、高级CSS概念，那时我一切都很好understood@smunteanu. 我没有看到OPs代码中有任何明显的错误。但无论何时你提出批评，请添加一些理由，以便OP能够理解你的批评是关于什么的。我的意思是，你首先需要让一个基本页面只在桌面上工作，然后，让它响应。我从来没有听说过一个网站可以在手机上运行，但不能在桌面上运行，对此我的解释是，在进入媒体之前，你没有正确地进行研究queries@smuteanu我一步一步走，如果你现在要深入学习HTML和CSS，你就会知道大多数更新的指南都采用移动优先的方法，因为这似乎更符合逻辑。我没有使用我不懂的代码，实际上我已经一步一步地完成了所有工作，并逐步建立了更高级的网站。正如你所注意到的，这个网站甚至都不先进，它的唯一宗旨是更好地理解代表性。你的回答很烦人，因为你似乎没有为你想表达的观点进行辩论。非常感谢，这似乎起到了作用。非常感谢。

html body {
  margin: 0;
  background-color: white;
  font-family: "Raleway", sans-serif;
}


.wrapper {
  margin: 0 auto;
  display: grid;
  grid-gap: 20px 10px;
  grid-template-columns: 1fr;
  max-width: 70vw;
}

.wrapper > * {
  padding: 10px

}

header {
border-bottom: 1px solid black;
}

#menuitem {
  display: inline;
  padding-right: 20px;

}
#menuitem a:link {
  color: black;
  text-decoration: none;
}

.article img {
  width: 56vw;
  height: 40vw;
  border: solid lightgrey 1px;
}
.article h2, p {
    width: 56vw;
    line-height: 1.5;
}

footer {
  border-top: 1px solid black;
  line-height: 1.5rem;
}
footer a:link {
  color: black;
  text-decoration: none;
}

@media screen and (min-width: 500px) {


section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px 20px;
}



section img {
  max-width: 20vw;
  max-height: 20vw;
}

}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="food.css">
    <title> title | Home </title>
  </head>
  <body>
    <div class="wrapper">
<header>
<h1>title</h1>
</header>
<nav>
  <div id="menuitem"><a href="#">recipes</a></div>
  <div id="menuitem"><a href="#">guides</a></div>
  <div id="menuitem"><a href="#">blog</a></div>
</nav>
<section>
  <div class="article">
    <img src="https://pickledplum.com/wp-content/uploads/2020/01/vegan-napa-cabbage-kimchi-2-1360.jpg" alt="Vegan kimchi">

    <h2>Vegan kimchi</h2>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>

  </div>
  <div class="article">
    <img src="https://www.weekendbakery.com/wp-content/uploads/sanfranciscosourdough.jpg" alt="Sourdough bread">
<h2>Classic sourdough bread</h2>
<p>Axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p>
  </div>
  <div class="article">
    <img src="https://www.delectabilia.com/wp-content/uploads/vegetarian-red-miso-ramen.jpg" alt="">
<h2>Vegetarian miso ramen</h2>
<p> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p>
  </div>

</section>
<footer>
<div class="footersection">
<a href="#">recipes</a><br>
<a href="#">guides</a><br>
<a href="#">about</a><br>
<a href="#">contact</a><br>
</div>

</footer>


    </div>

  </body>
</html>