【发布时间】：2017-02-04 16:06:39
【问题描述】：
第一次发帖，请见谅，并告诉我这里发帖的不正确之处，非常感谢。
尝试通过 Coursera 课程“HTML, CSS, and Javascript for Web Developers”的示例制作简单的网站。我将首先发布已给出的目标和图像，然后是我的html/css，然后是完全一团糟的第二个版本（如果需要，请在以后的帖子中建议如何更好地做到这一点。没有Bootstrap 或任何其他frameworks 在这个项目中是允许的。
试图缩小页面fully responsive，而不是只为每个媒体尺寸使用特定的像素尺寸。忽略字体大小等其他最可能出现的错误（除非您想就我做错的所有事情给我建议，我会欢迎的）。重点是让 100% 宽度的三宽容器的“行”下降到两行，第一行有 2 个containers 100% 宽度，第二行有 1 个 100% 宽度的容器。然后再次缩小到三行，每行 1 个 100% 宽的容器。所有这些在下面链接的项目目标中都有更详细的说明。
我遇到的另一个问题是当前版本中最后一个容器之后右侧的多余空间，当我找不到导致它的原因时，我将边距设置为 0，容器宽度设置为 100%。
我尝试通过为它们指定不同的 col 类和基本宽度来创建 css grid，然后让 @media 更改这些而不做任何更改。
我的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment Solution for Module 2</title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto|Sansita" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<h1>Our Menu</h1>
<div id="container">
<!-- Chicken Container -->
<div id="op-1" class="menu">
<div class="food-type chicken">Chicken
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Beef Container -->
<div id="op-2" class="menu">
<div class="food-type beef">Beef
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Sushi Container -->
<div id="op-3" class="menu">
<div class="food-type sushi">Sushi
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
</body>
</html>
我的 CSS
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*===============================================
My CSS Styles
=============================================== */
* {
box-sizing: border-box;
}
body {
background: #fff;
box-sizing: border-box;
font-family: raleway; roboto; ransita; sans-serif;
font-size: 200%;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
margin: 30px 0 50px 0;
}
#container {
width: 100%;
max-width: 100%;
margin: 0px;
padding: 10px;
/*display: flex;
justify-content: space-between; */
}
.menu {
float:left;
width:30%;
margin: 10px;
background: grey;
border: 1px solid #000;
font-size: .75em;
position: relative;
}
/*
div.foo {
background: grey;
border: 1px solid #000;
font-size: .75em;
position: relative;
}
*/
div.food-type {
text-align: center;
font-weight: bold;
padding: 10px;
width: 30%;
position: relative;
float: right;
/*left: 70%;*/
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
div.chicken {
background: pink;
}
div.beef {
background: red;
color: #fff;
}
div.sushi {
background: yellow;
}
p {
color: #fff;
padding: 10px;
font-size: .75em;
clear: right;
}
@media all (min-width: 992px) {
.menu {width: 33.33%;}
}
@media all (min-width: 768px) and (max-width: 991px) {
#op-1.menu #op-2.menu {width: 50%;}
#id-3.menu {width: 100%;}
}
@media all (max-width: 767px) {
.menu {width: 100%;}
}
第 2 版尝试使用 CSS Grid- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment Solution for Module 2</title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto|Sansita" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles2.css">
</head>
<body>
<h1>Our Menu</h1>
<div id="grid-container">
<!-- Chicken Container -->
<div id="op-1" class="menu col-2 col-3 col-6">
<div class="food-type chicken">
Chicken
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Beef Container -->
<div id="op-2" class="menu col-2 col-3 col-6">
<div class="food-type beef">
Beef
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Sushi Container -->
<div id="op-3" class="menu op-3 col-2 col-3 col-6">
<div class="food-type sushi">
Sushi
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
</body>
</html>
CSS：
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*===============================================
My CSS Styles
=============================================== */
* {
box-sizing: border-box;
}
body {
background: #fff;
box-sizing: border-box;
font-family: raleway; roboto; ransita; sans-serif;
font-size: 200%;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
margin: 30px 0 50px 0;
}
.menu {
float:left;
width:30%;
margin: 0px;
background: grey;
border: 1px solid #000;
font-size: .75em;
position: relative;
}
div.food-type {
text-align: center;
font-weight: bold;
padding: 10px;
width: 30%;
position: relative;
float: right;
/*left: 70%;*/
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
div.chicken {
background: pink;
}
div.beef {
background: red;
color: #fff;
}
div.sushi {
background: yellow;
}
p {
color: #fff;
padding: 10px;
font-size: .75em;
clear: right;
}
.grid-container {
width: 100%;
max-width: 100%;
padding: 12px;
}
/*
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
*/
[class*='col-'] {
float: left;
min-height: 1px;
width: 33.33%;
padding: 12px;
}
/*
.col-1{ width: 16.66%; }
.col-2{ width: 33.33%; }
.col-3{ width: 50%; }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%; } */
@media all (min-width: 992px) {
.col-2 {width: 33.33%;}
}
@media all (min-width: 768px) and (max-width: 991px) {
#id-1 #id-2 .col-3 {width: 50%;}
#id-3 .col-6 {width: 100%;}
}
@media all (max-width: 767px) {
#id-1 #id-2 #id-3 {width: 100%;}
}
非常感谢，抱歉说了这么多，再次请让我知道如何改进以后的帖子。
【问题讨论】：
-
尝试检查 chrome 检查器。您会清楚地看到哪个规则覆盖了您的媒体查询。
-
我对 chrome 检查器还是很陌生，但是我已经检查了所有内容，可以看到应用了哪些东西，哪些东西被覆盖了，我就是不知道为什么。
标签： html css responsive-design media-queries