响应式网站无法根据宽度工作

Question

当我切换到响应式网站时，它在“285px”宽度上显示红色背景，而我已将“1140px”设置为最大宽度。如果我使用最小宽度，它会相反，效果直到 256/276 像素才会显示，然后它来了。我尝试了最大和最小宽度，我必须通过外部链接来做，但在互联网上，每个人都显示内联.请帮助，我被这个问题困扰了超过 3 天。

当我切换到响应式网站时，它在“285px”宽度上显示红色背景，而我已将“1140px”设置为最大宽度。如果我使用最小宽度，它会相反，效果直到 256/276 像素才会显示，然后它来了。我尝试了最大和最小宽度，我必须通过外部链接来做，但在互联网上，每个人都显示内联.请帮助，我被这个问题困扰了超过 3 天。

*{
    margin:0;
    padding:0;
}
/* navbar */

#top{
    display:flex;
    position: relative;

}

#top ul{
    display:flex;
    margin: auto;

}
#top ul li{
   
    margin:10px;
    font-size: 80px;
    list-style: none;

}
#top ul li a{
    text-decoration: none;
    color:beige;
   padding:20px 70px 20px 70px;

}
#top ul a:hover{
    border:4px solid brown;
    border-radius: 9px;
    background-color: white;
    color:black;
    border-radius: 30px;

}

.logo img{
    margin-top:55px;
    margin-left:30px;
    height:177px;
    margin-bottom: 20px;
 
}
#top::before{
    content:"";
    background-color: black;
    position: absolute;
    height:100%;
    width:100%;
    z-index:-1;
    opacity:0.4;
 
}
/* middle */
#middle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
  
}
#middle::before{
    content:"";
    position: absolute;
    background:url('/photo/buffet-315691.jpg') no-repeat center center/cover;
    height:94%;
    width:100%;
    z-index:-1;
    opacity:0.7;
  
}
.head {
    color:black;
    font-size: 100px;
    text-align: center;
    padding:20px;
  
}
.para {
 
    text-align: center;
    font-size: 55px;
    color:#332d2d;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
}
.para p{
    width:2000px;
    font-size: 80px;
    margin-bottom: 0px;
    color:#332d2d;

}
.head h1{
    margin-top:400px;
}
/* speciality */
.op{
    border: 16px solid black;
    display:block;
    width: 1500px;
    height:1100px;
    margin-top: 50px;
    margin-left: 40px;
    background:rgb(238, 222, 222);
}
.he{
    margin-top:100px;
    margin-bottom: 0px;
    
}
.op img{
    display:block;
    width: 706px;
    height: 442px;
    margin: auto;
    margin-top: 0px;
    margin-bottom:10px;

}
#speciality{
 
    display: flex;
    margin:auto;
    margin:0px;
    padding:0px;
    
}
#Box{
    
    height:800px;

    margin: auto;
  
    position: relative;
}
.group{
    display: block;
    width:500px;
    margin:auto;
    height:400px;

}
.group input{
    padding:30px;
    margin:30px;
    height:40px;
    width:800px;
}
.riv{
    height:150px;
    width:800px;
    padding:30px;
    margin:30px;
}
#form{
    position: relative;
}
#form::before{
    content:"";
    background: url('/photo/food-2569257.jpg') no-repeat center center/cover;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.4;
  
    margin-top: 50px;
}
#form h1{
    font-size: 200px;
}
.group input{
    font-size: 50px;
}
#mi{
    position: relative;
}
.riv{
    font-size: 50px;
}
#form h1{
   
    margin-left: 300px;

}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" media="screen and (max-width:1200px)" href="ph.css"> 


<body>
    <div id="top">
        <div class="logo">
            <img src="/photo/l.jpeg" alt="ISSUE">
        </div>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Menu</a></li>
            <li><a href="">Recipie</a></li>
            <li><a href="">About us</a></li>
        </ul>
    </div>
    <section id="middle">
        <div class="head">
            <h1>It's Easy to cook</h1>
        </div>
        <div class="para">
            <p>Recipies made simple , so that you can cook without compromising on taste,also order the food you like
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi similique debitis dolorum laudantium,
                iusto minima, neque perspiciatis amet, officiis reprehenderit expedita temporibus. Soluta dolorum velit
                vel eum corrupti veritatis! Reprehenderit delectus voluptatem repellat doloremque?</p>
        </div>
    </section>
    <section id="mi">
    <div class="head he">
        <h1>Our speciality</h1>
    </div>
    <div id="speciality">
        <div class="op">
            <img src="/photo/dalmakni.jpg">
            <h1 class="head">Dal Makhni</h1>
            <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quas harum ab animi,
                asperiores perspiciatis earum quos, possimus praesentium pariatur amet. Ab temporibus labore minus
                commodi, dolorem placeat maxime illum?</p>
        </div>
        <div class="op">
            <img src="/photo/aloo.jpg">
            <h1 class="head">Aloo Cheese Paratha</h1>
            <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quas harum ab animi,
                asperiores perspiciatis earum quos, possimus praesentium pariatur amet. Ab temporibus labore minus
                commodi, dolorem placeat maxime illum?</p>
        </div>
        <div class="op">
            <img src="/photo/biryani-1141444_1920.jpg">
            <h1 class="head">Veg Biryani</h1>
            <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quas harum ab animi,
                asperiores perspiciatis earum quos, possimus praesentium pariatur amet. Ab temporibus labore minus
                commodi, dolorem placeat maxime illum?</p>
        </div>
        <div class="op">
            <img src="/photo/paneer.jpg">
            <h1 class="head">Matar Paneer</h1>
            <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quas harum ab animi,
                asperiores perspiciatis earum quos, possimus praesentium pariatur amet. Ab temporibus labore minus
                commodi, dolorem placeat maxime illum?</p>
        </div>
    </section>
    <section id="form">
        <h1 class="head">Details</h1>
        <section id="Box"><form actions="">
            <div class="group">
                <label class="name" id="nam">
                <input type="text" name="name"placeholder="enter your name">
                <input type="number" name="name" placeholder="Enter your number">
                <input type="email" name="name" placeholder="Enter your email">
                <textarea name="name" class="riv" placeholder="enter review"></textarea>
                </label>
                </form>
            </div>
    </section>
</head>
</body>

</html> 

Answer 1

您可以进行外部链接。没问题。下面的css代码是我在我的页面上使用的。它完全符合您的需要。您必须为此使用媒体查询。

下面的CSS代码供您参考。您将需要专注于容器类的媒体查询 (@media) 代码。

阅读代码中的 cmets。它会回答你的问题。
这是我的 main.css 文件

/*________________________________________________________________________________
Wrapper
__________________________________________________________________________________*/
.wrapper{
    width: 100%;
    height: 100vh;
    border: 1px solid var(--ColGrey80);
    box-sizing: border-box;
    display: flex;
    justify-content:center;
    align-items: center;
    overflow-x: hidden; 
    overflow-y: hidden; 
}
/*________________________________________________________________________________
Container
__________________________________________________________________________________*/
/* This applies from 0px to 600px - Primarily Mobile*/
.container{
    width: 100%;
    height: 100vh;
    background: var(--ColPastelGreen);
}
/* This applies from 600px onwards - Primarily Laptop*/
@media only screen and (min-width:600px){
    .container{
        max-width: 450px;
        height: 80vh;
        border: 1px solid var(--ColAppHighlight);
        border-radius: 10px;
        background: var(--ColWhite);
    }
}

HTML 代码如下：
这是为了让您检查如何将 css 文件链接到 html 文件。检查找到 index.css 和 main.css 的标签。这些是外部 css 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crogress</title>
    <link rel="shortcut icon" href="lib/images/c.png" type="image/x-icon">
    <link rel="stylesheet" href="lib/main.css">
    <link rel="stylesheet" href="lib/index.css">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div id="header">
                <h1 id="title">Crogress</h1>
                <p id="signin">Sign in</p>
            </div>
            <form id="form">
                <div id="inputFields">
                    <input type="text" name="userName" id="userName" class="textbox" autocomplete="off" value="User Name">
                    <input type="text" name="password" id="password" class="textbox" autocomplete="off" value="Password">
                    <div id="error"></div>
                </div>
                <div id="footer">
                    <a id="create" href="http://">Create Account</a>
                    <button type="button" onclick="authenticate();">Sign in</button>
                </div>
            </form>
        </div>
    </div>
    <script src="lib/index.js"></script>
</body>
</html>