我正在寻求帮助，使我的 HTML 响应所有屏幕尺寸。我试过 @media 但它似乎不起作用，也许我包含了错误的元素？
谢谢!
我还有 1 个问题，我应该在我的元素周围使用包装器而不是边框吗？
我想在 class=main 和 class=navigation 之间做一个间隔。 就像我在 header 和 main 之间所做的那样(使用 margin 属性完成) 但出于某种原因，我无法让它在 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>最佳答案
检查你的CSS。正如其他人提到的那样，有几个错误。除了这个快速提示之外，尝试使 H1 标签在响应时看起来不错。当前，调整浏览器大小时，“Tuscany Restaurant”显示为两行。
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
header a, header h1 {
display: flex;
margin: 0 auto;
}
}
已编辑 Fiddle
关于html - 您好，我正在寻求有关我的 HTML 和 CSS 使其响应的帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54760374/