有人可以帮助我使此页面响应吗？
当在手机上显示该页面时，需要在屏幕上填充鸡的图片，然后是带有文本的椅子和桌子的图片。向下滚动时，您需要两行包含图片和文字，向下滚动时，您需要在一个屏幕上获得三列的图片和文字。
仅使用html和CSS，而不使用javascript或引导程序。
我尝试了各种显示，但是效果不佳。
有人可以向我解释如何正确设置媒体查询。
我在下面包括了css和html代码
非常感谢
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body,
{
font-family: 'Ubuntu', sans-serif;
font-size: 16px;
}
.wrapper {
width: 1614px;
margin: 0 auto;
}
img {
max-width: 100%;
}
.main-header {
background-image: url(img/bkg.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 774px;
margin-bottom: 52px;
}
.main-header .header-content {
position: relative;
top: 50%;
margin-left: 40px;
color: #000;
display: inline-block;
}
.main-header .header-content h1 {
font-size: 3em;
}
.main-header .header-content p {
font-weight: bold;
font-size: 20px;
}
.bars,
.close {
display: flex;
justify-content: flex-end;
font-size: 28px;
margin-right: 20px;
}
.bars p,
.close p {
margin-top: -3px;
margin-right: 10px;
}
.menu-plein-ecran {
background-color: #3b685b;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: none;
}
.menu-plein-ecran:target {
display: block;
}
.navbar {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
}
.navbar li {
list-style: none;
padding: 10px;
}
.navbar li a {
font-size: 4em;
text-decoration: none;
color: #fff;
}
.navbar li a:hover {
color: #f44336;
}
/**************************main**********************/
main {
max-width: 1200px;
margin: 0 auto;
}
.main-content .container1,
.main-content .container2,
.main-content .container3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
grid-column-gap: 50px;
}
.main-content > .more {
color: #549ff3;
}
.main-content .more:hover {
color: #f00;
}
.main-content h2 {
margin-bottom: 10px;
margin-top: 10px;
}
.main-content p {
margin-bottom: 40px;
}
/************************ footer form container***********************/
.form-container {
padding: 1em;
}
.wrapper2 > * {
padding: 1em;
}
.contact {
width: 900px;
height: 50vh;
margin: 0 auto;
margin-top: 20px;
background: rgba(250, 250, 250, 0.5);
border-radius: 20px;
}
.contact h1 {
margin-bottom: 40px;
}
.contact form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.contact form p {
margin: 0;
}
.contact form label {
display: block;
margin-bottom: 10px;
color: #669;
}
.contact form button {
border: 0;
border-radius: 40px;
margin: 5px;
width: 25%;
padding: 0.5em;
background-image: linear-gradient(#b9bbde, #669);
}
.contact .full {
grid-area: 3/1/4/3;
text-align: center;
}
.contact form input,
.contact form textarea {
width: 92%;
padding: 1em;
border: 1px solid #c9e6ff;
border-radius: 10px;
}
.contact form button:hover,
.contact form button:focus {
background-image: linear-gradient(#666, #444);
outline: 0;
}
footer {
background-image: url(img/bkg-form.jpg);
background-size: cover;
margin-top: 50px;
height: 636px;
}
footer ul {
background: #ff7fcf;
margin: 0;
}
footer a {
border-left: 1em solid #ededed;
color: #ededed;
padding-left: .75em;
text-decoration: none;
}
footer a:hover {
border-color: #333;
}
footer a {
display: block;
float: left;
margin-bottom: 0.2em;
margin-left: 1em;
min-width: 26%;
}
.item:after,
nav:after,
footer ul:after,
.content:after {
clear: both;
content: "";
display: block;
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>devoir2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<!---------------wrapper------------------->
<div class="wrapper">
<!--------------- début header------------------->
<header class="main-header" id="top">
<div class="bars">
<p>menu</p>
<a href="#menu"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>
<div class="header-content">
<h1>d-angle</h1>
<p>a responsive answer</p>
</div>
<!---------------navbar------------------->
<nav class="menu-plein-ecran" id="menu">
<div class="close">
<p>fermer</p>
<a href="#top"><i class="fa fa-times"></i></a>
</div>
<div class="main-menu">
<ul class="navbar">
<li><a href="#">Projets</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Tower</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</nav>
</header>
<!---------------fin header------------------->
<!---------------début main------------------->
<main class="main-content">
<div class="container1">
<section>
<figure>
<img src="img/img-01.jpg" alt="chaises">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque quibusdam. Quibusdam alias praesentium quas enim velit. Illo ab id optio quae sint ex debitis nostrum officia laborum, placeat, illum delectus nesciunt! <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-03.jpg" alt="fenetre">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque ! <a href="#" class="more">Lire la suite</a></p>
</section>
</div>
<div class="container2">
<section>
<figure>
<img src="img/img-04.jpg" alt="carreaux">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque quibusdam. Quibusdam alias praesentium quas enim velit. Illo ab id optio quae sint ex debitis nostrum officia laborum, placeat, illum delectus nesciunt! <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-02.jpg" alt="velo">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque quibusdam. Quibusdam alias praesentium quas enim velit. Illo ab id optio quae sint ex debitis nostrum officia laborum, placeat, illum delectus nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit explicabo eius, ducimus ullam quis blanditiis alias dolor, delectus et officiis. <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-05.jpg" alt="artiste">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque quibusdam. Quibusdam alias praesentium quas enim velit. Illo ab id optio quae sint ex debitis nostrum officia laborum, placeat, illum delectus nesciunt! <a href="#" class="more">Lire la suite</a></p>
</section>
</div>
<div class="container3">
<section>
<figure>
<img src="img/img-06.jpg" alt="pneu">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-07.jpg" alt="main">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur assumenda iste atque officiis ab. Architecto impedit facilis eaque temporibus culpa libero, ut dolorem tempore illo nobis, amet reiciendis consectetur ea velit placeat quia debitis cumque quibusdam. Quibusdam alias praesentium quas enim velit. Illo ab id optio quae sint ex debitis nostrum officia laborum, placeat, illum delectus nesciunt! <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-08.jpg" alt="oiseaux">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur <a href="#" class="more">Lire la suite</a></p>
</section>
<section>
<figure>
<img src="img/img-09.jpg" alt="personne">
</figure>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum at, modi hic possimus quasi tempora sed asperiores qui eius excepturi iure voluptates doloremque minima beatae laboriosam quae ad tenetur esse iste nostrum obcaecati. Quaerat reprehenderit necessitatibus eum cum possimus, a deleniti ipsa nemo corrupti eveniet suscipit repudiandae ipsum pariatur rem earum aspernatur <a href="#" class="more">Lire la suite</a></p>
</section>
</div>
</main>
<!-------------------------fin main--------------------------------->
<!------------------------ début footer------------------------------>
<footer>
<div class="form-container">
<div class="wrapper2">
<div class="contact">
<h1>Contactez-nous</h1>
<form>
<p>
<label>Name*:</label>
<input type="text" name="name" placeholder="Entrez votre nom" required>
</p>
<p>
<label>Telephone*:</label>
<input type="email" name="email" placeholder="Laissez votre numero de tel" required>
</p>
<p>
<label>Email*:</label>
<input type="text" name="phone" placeholder="Votre email" required>
</p>
<p>
<label>Message:</label>
<textarea name="message" rows="5" placeholder="Laissez-nous votre message"></textarea>
</p>
<p class="full">
<button type="submit">Envoyer</button><br/>
<button type="reset">Reset</button>
</p>
</form>
</div>
</div>
</div>
<ul class="responsive">
<li><a href="#">Responsive Design</a></li>
<li><a href="#">Principes</a></li>
<li><a href="#">Grilles fluides</a></li>
<li><a href="#">Smartphones</a></li>
<li><a href="#">Ecran Responsive</a></li>
<li><a href="#">Principes</a></li>
<li><a href="#">Grilles fluides</a></li>
<li><a href="#">Medias fluides</a></li>
<li><a href="#">Landscape</a></li>
<li><a href="#">Media querie portrait</a></li>
<li><a href="#">Atelier Design</a></li>
<li><a href="#">Points de rupture</a></li>
<li><a href="#">Typographie Responsive</a></li>
<li><a href="#">Un formulaire responsive</a></li>
</ul>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
也许您可以尝试一下，首先是移动样式，从小屏幕到大屏幕， 例如：
// mobile style
.navbar li a {
font-size: 1em;
}
@media (min-width: 560px) {
.navbar li a {
font-size: 1.5em;
}
}
// tablet
@media (min-width: 768px) {
.navbar li a {
font-size: 2em;
}
}
//laptop
@media (min-width: 960px) {
.navbar li a {
font-size: 2.5em;
}
}
//desktop
@media (min-width: 1280px) {
.navbar li a {
font-size: 3em;
}
}