如何使该网站专门针对移动屏幕做出响应？答案

【问题标题】：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" 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>

【问题讨论】：

了解CSS media queries

标签： jquery html css responsive-design

【解决方案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）{页脚{背景：红色； } }