您好，正在寻求有关我的 HTML 和 CSS 的帮助，使其具有响应性答案

【问题标题】：Hi looking for help whit my HTML and CSS making it responsive您好，正在寻求有关我的 HTML 和 CSS 的帮助，使其具有响应性
【发布时间】：2019-07-12 14:38:35
【问题描述】：

我正在寻求帮助，以使我的 HTML 响应所有屏幕尺寸。我试过@media，但它似乎不起作用，也许我包含了错误的元素？

谢谢！

我还有 1 个问题，我应该在元素周围使用包装器而不是边框吗？

我想在 class=main 和 class=navigation 之间做一个间隔。就像我在标题和主要之间所做的一样（使用边距属性完成）但由于某种原因，我不能让它在 margin-left 值下工作......

有什么建议吗？

谢谢！

 {
  box-sizing: border-box;
  margin: 0px;
}

.head header {
 border: 1px solid;
 width : 100%;
 background-color: #4ca730;
 line-height: 150px;
 text-align: center;
}

.head h1 {
 display : inLine;
 color: #ecee1b;
 margin-top: 100px;
 margin-left: 1%;

}

.head img {
 padding-left: 10px; 	 
 background-image:url("Images/spaghetti.jpg");
 display: inLine;
 float : left;
}

.navigation {
 height: 400px;
 border-right: 1px solid;
 float: left;
 background-color: #4ca730;
}
nav a {
 display: block;
 padding-top: 20px;
 padding-left: 10px;
}
.form {
margin-top: 5%;
margin-left: 5%;
margin-right: 5%;
border-bottom: 1px solid;
border-top: 1px solid;
border-left: 1px solid;
background-color: gray;
}
.main {
 column-gap: 2em;
 height: 380px;
 margin-left: 5%;
 margin-top:1%;
 margin-bottom: 1%;
 border: 1px solid;
}
.main img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
}
.main p {
 text-align: center;
 margin-top: 3%;
}

footer {
 border: 1px solid;
 background-color: #4ca730;
}

p {
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 5px;
}

@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <head>
  <link rel="stylesheet" type="text/css" href="tuscany.css"/>
  
  <title>Tuscany Restaurant</title>
</head>

<body>
<div class="head">
 <header>
    <a href="Home.html">
	<img src="Images/spaghetti.jpg" width="200" height="150">
	</a>
   <h1>Tuscany Restaurant</h1>
   </header>
   </div>
   
<div class="navigation">
  <nav>
   <a href="Home.html">Home</a>
   <a href="Menu.html">Menu</a>
   <a href="Contact.html">Contact Us</a>
  </nav>
  <div class="form"
   <form action="/action_page.php">
  Username: <input type="text" name="usrname"><br>
  Password: <input type="text" name="pwd"><br>
  <input type="checkbox" name="remember" value="remember"> Remember me next time<br> 
  <input type="Submit" value="Log in">
</form>
</div>
</div>

<div class="main">
 <article>
  <img src="Images/restaurant.jpg" width="200" height="150">
 <p>Tuscany is Italian Restaurant. Tuscany Restaurant serves pasta,
pizza and beverages.</p>
</article>
</div>

<footer>
  <p>Last Update:20.02.2019<p>
   <p>Created By: Erki Kurvits<p>
</footer>

  
</body>
</html>

【问题讨论】：

包括您的@media 示例。
你的@media 标签没有关闭.. ?
你的div 和.form 类也没有关闭:)
谢谢！我意识到我有很多错误没有关闭标签等等......

标签： html css responsive

【解决方案1】：

快速解决您的问题：

1) 缺少“{}”大括号

2)我用于媒体查询的方法：@media and (max-width: 600 px) 媒体查询应该像这样关闭：

@media and (max-width: 600px) {
 nav, article {
    width: 100%;
    height: auto;
 }
}

【讨论】：

【解决方案2】：

检查你的 CSS。正如其他人所提到的，有几个错误。除此之外，作为一个快速提示，尝试让H1 标签在响应时看起来不错。目前，在调整浏览器大小时，“Tuscany Restaurant”会显示为两行。

@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
header a, header h1 {
    display: flex;
    margin: 0 auto;
  }
}

已编辑Fiddle

【讨论】：

感谢您提供的信息！是的，我在做这件事时试图检查我的 css，但初学者仍然很难发现小错误。

【解决方案3】：

希望有帮助

请阅读媒体查询Read here

您错过了关闭 div 或媒体查询标签。

@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;}
}

【讨论】：

谢谢！我还发现，因为 nav 和 article 是我的 HTML 中的类，所以我没有包含 . （点）在我的 CSS 中的元素前面
我做了，但没有显示。感谢您的反馈！声望低于 15 人的投票将被记录，但不会更改公开显示的帖子得分。