Question

这是代码，当我调整页面大小时，我丢失了标题。我希望在页面调整大小后整个div2应该在中心。并且不对div2的宽度和高度做任何事情。我尝试了很多选择，但我无法做到。请帮帮我!!!

    <html>
<head>
<script></script>
<style>
body {
    padding: 0;
    margin: 0;
}
#div0 {
position:fixed;
    opacity:1;
    width: 100%;
    height: 100%;
z-index:1;
    background-color: Green;

}


#div1 {
    padding: 5px;
position:fixed;
opacity:0.5;
    width: 100%;
    height: 100%;
z-index:1;
    background-color: yellow;

}

#div2 {
top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0 auto;
    position:absolute;
    width:1000px;
    height:400px;
    z-index:2;
    background:red;
margin-top:auto;
margin-bottom:auto;

}

#header1 {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
    z-index:3;
}
#nav1 {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
    z-index:3;        
}   
#section1 {
    width:350px;
    float:left;
    padding:10px;
    z-index:3;       
}
#footer1 {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;     
    z-index:3;   
}

</style>

</head>
<body>

<div id="div0">
<center><h1>Karan Dayaba</h1></center>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
</div>

<div id="div1"></div>
<div id="div2">

<div id="header1">
<h1>Karan</h1>
</div>

<div id="nav1">
Karan 1<br>
Karan 2<br>
Karan 3<br>
</div>

<div id="section1">
<h2>Karan 1</h2>
<p>
awdawdawadwadwadwadwad3wanul8qdy278doq2lu;dwanwdaio7wbt6adlwmdyiabnl,kwtladwua,
awdaw[moa,'0yw8njm6artbkdawadmwaln;ui;iwpeu4ofiun;omwpoauwidnuwaod.
</p>
<p>
awdoia;uwma,dwa/.wduaybnlgdr;dougnroiydgrnur;gseusgn;esugyp9ysf7n4p;f389yfs
wdawalydnuyqhduyawiadwladwadywladyaliwdawudnpawda.
</p>
</div>

<div id="footer1">
Karan Dayaba
</div>

</div>

</body>
</html>

Answer 1

首先，您应该在程序中使用width，以便可以使用媒体查询。（它是实现你想要的而不是完整代码的指导方针）

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

将上述代码放入head标签中。告诉您的浏览器必须从设备宽度获得宽度。

2.   put this in your css file and dont forget to link your css and html    


              @media screen and (max-width: 600px) 
             // change max-width size according to your requirement
                   {// select the tag /id/class according to your choice on
                     which you want to apply the change.
                    #header1 {
                  // write code that you want to implement according to
                      screen size of the divice
                      width: 100%;
                      text-align: center;
                      /*vertical-align: middle;*/
                      /*background: red;*/
                      font-size: 5px;
                    }


                }

这是代码，当我调整页面大小时，我丢失了标题

1 个答案: