0

正在为一个学校项目制作一个网站，但它的外观将在不同类型的显示器上不断变化。我知道我需要让它响应，但我现在不知道该怎么做。谁能给我一些提示或指出正确的方向？

*{
    margin: 0;
    padding: 0;
    font-family: century gothic;
}

header {
    background-image: url(../cyber.gif);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

/* Buttons */
ul{
    position: absolute;
    top: 0.1%;
    right: 5%;
    list-style-type: none;
    margin-top:  25px;
}

ul li{
    display: inline-block;
}

ul li a{
    text-decoration: none;
    color: #fff;
    transform: translate(-50%, -50%);
    background: none;
    height: 25px;
    border-radius: 25px;
    padding: 10px;
    border: 1px solid transparent;
    transition: 0.6s ease;
}

ul li a:hover{
    background-color: #fff;
    color: #000;
}

ul li.active a{
    background-color: #fff;
    color: #000;
}

/* LOGO */
.logo img{
    float: left;
    width: 150px;
    height: auto;
}

.main{
    max-width: 1200px
    margin: auto;
}

/* CONTENT TITLE */
.title{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.title h1{
    color: #fff;
    font-size: 60px;
}

/* CONTENT */
.content-box {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1000px;
    height: 485px;
    background-color: #262626;
    opacity: 0.9; 
    filter: alpha(opacity=90);
}

.paragraph {
    position: absolute;
    width: 900px;
    height: 100px;
    color: #fff;
    font-size: 20px;
    padding: 50px;
}

.nav {
    position: absolute;
    top:37%;
    width: 900px;
    height: 385px;
    color: #fff;
    padding: 50px;
}



/* SEARCH */
.search-box{
    position: absolute;
    top: 5.5%;
    left: 38%;
    transform: translate(-50%, -50%);
    background: #2f3640;
    height: 25px;
    border-radius: 25px;
    padding: 10px;
    opacity: 0.6; 
    filter: alpha(opacity=60);
}

.search-btn{
    color: #6C92C8;
    float: right;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #2f3640;
display: flex;
    justify-content: center;
    align-items: center;
}

.search-txt{
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: white;
    font-size: 16px;
    line-height: 25px;
    width: 600px;
}


/* FOOTER */
.footer {
    background: #303036;
   
   }
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    
    <script src="https://kit.fontawesome.com/849cf0a04d.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
<!-- Logo -->
    <div class="main">
        <div class="logo">
            <img src="glasses2.png">
<!--// Logo -->

<!-- Buttons -->
            <ul>
                <li class="active"><a href="Homepage.html">Home</a></li>
                <li><a href="Animation Page.html">Animation</a></li>
                <li><a href="Video Page.html">Video</a></li>
                <li><a href="Audio Page.html">Audio</a></li>
                <li><a href="Image Page.html">Image</a></li>
            </ul>
        </div>
<!--// Buttons -->

<!-- Content -->
        <div class="content-box">
            <div class="paragraph">
                What is Multimedia? Multimedia can...
            </div>
            <div class="nav">
                To learn more about multimedia and its forms, click on any link to get started!
            </div>
        </div>


        <div class="title">
            <h1>Multimedia</h1>
        </div>
<!--// Content -->

<!-- Search Box -->
        <div class="search-box">
            <input class="search-txt" type="text" name="input" placeholder="Search..">
            <a class="search-btn" href="#">
            <i class="fas fa-search"></i>
                
            </a>
<!--// Search Box -->
    </header>

</body>
<!-- footer -->
        <div class="footer">
            <div class="content">
                <div class="footer-section-about">
                </div>

                <div class="footer-section-links">
                    Quick Links:
                    <br>
                    <ui>
                        <btn><a href="Homepage.html">Home</a></btn>
                        <br>
                        <btn><a href="Animation Page.html">Animation</a></btn>
                        <br>
                        <btn><a href="Video Page.html">Video</a></btn>
                        <br>
                        <btn><a href="Audio Page.html">Audio</a></btn>
                        <br>
                        <btn><a href="Image Page.html">Image</a></btn>
                    </ui>
                </div>
                <div class="footer-section-address"></div>
            </div>

            <div class="footer-bottom">
                &copy; Designed by RC
            </div>
        </div>
<!--// footer -->
</html>

4

3 回答 3

0

添加此元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

并使用媒体查询：

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

于 2020-06-24T09:45:10.363 回答
0

正如 Sahil Langoo 指出的那样，首先您可以将以下代码添加到标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但这不足以使您的整个页面响应。您还必须考虑图像、导航元素等的行为......

关于图像，一个简单的添加到你的 CSS 就可以了：

img {
  width: 100%;
  height: auto;
}

对于响应式网页设计的简单而不繁琐的介绍，您可以查看此链接：https ://www.w3schools.com/css/css_rwd_intro.asp

希望能帮助到你

于 2020-06-24T09:41:27.960 回答
0

您已经在 CSS 修复中定义了静态宽度，首先使用响应值，如 %、em 或 rm ...

然后将此元标记添加到头部标记中：

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

并在 html 标记之前的底部关闭 body 标记，并将主要内容移动到页眉和页脚之间

</body> </html>

于 2020-06-24T09:19:37.427 回答