如何使该网站专门针对移动屏幕做出响应？
Posted
技术标签:
【中文标题】如何使该网站专门针对移动屏幕做出响应？【英文标题】：How can I make this website responsive specifically for mobile screens? 【发布时间】：2020-07-09 03:15:01 【问题描述】：有人可以帮我让这个页面响应吗？
当页面在手机上显示时，鸡的图片需要填满屏幕，然后是带有文字的椅子和桌子的图片。当您进一步向下滚动时，您需要获得两列图片和文字，当您进一步向下滚动时，您需要在一个屏幕上获得三列图片和文字等。
仅使用 html 和 Css，不使用 javascript 或 bootstrap。
我尝试了不同类型的显示，但我无法获得好的结果。
谁能解释一下如何正确设置媒体查询。
我在下面包含了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" >
</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" >
</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" >
</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" >
</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" >
</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" >
</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" >
</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" >
</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" >
</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>【问题讨论】：
了解CSS media queries 【参考方案1】：也许你可以试试这个，手机风格优先，小屏变大， 例如：
// 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;
【讨论】：
谢谢你的回答，但问题不是导航栏，而是联系表格，主要和页脚 例如：导航栏，如果你想改变样式，在任何下一个@media(min-width: ... px) ... // 移动样式页脚 背景：绿色； @media（最小宽度：560px）页脚背景：红色；以上是关于如何使该网站专门针对移动屏幕做出响应？的主要内容，如果未能解决你的问题，请参考以下文章