html - 调整页面大小时，所有事情都搞砸了

This question already has answers here:

Change layout based on screen size

                                    （2个答案）



                            Responsive CSS- Different Layout for Different Size

                                    （4个答案）



                            Can I dynamically change the page layout in order to accommodate the window size?

                                    （2个答案）



                            HTML5/CSS: update layout according to changing page size?

                                    （2个答案）


                                6天前关闭。


我希望有人能帮助我。我得到了我应该提出的任务。
但是我遇到问题，当我调整页面大小时，一切都出错了。
请帮忙。

这是我的代码。

body{
display:block;
margin: 0;
padding: 0;
font-family:sans-serif;
background: #000046;


background-size:cover;

}

.bgg{
  display:block;

padding:0px 0px;
width:85%;
height:80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background:#f5f2d0 ;

}


.warp .sidbar{
margin: 0px;
padding: 0px;
position: fixed;
width: 20%;
height: 100%;
background-color: #2F80ED;

}

.warp{
  display: flex;
  position: relative;
}
*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.warp .sidbar ul li {



border-bottom: 1px solid #3C3B3F;


}
.warp .sidbar ul li a  {
  padding: 15px;
  color: white;
  display: block;
}
.warp .sidbar ul li a .fas {
  width: 25px ;
}
.warp .sidbar ul li :hover {
  background: #243B55;



}
.warp .sidbar ul li :hover a{
color: white;
}
.bgs{

padding:0px 0px;
 margin-left: 130px;
width:70%;
height:80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

background:#f5f2d0 ;

}
.info{
    overflow: hidden;
    font-size:20px;
    padding:8px 0;
    margin:8px 0;


}
.info input{
height: 30px;
    outline: none;
    background: none;
    color: black;
    font-size: 15px;
margin-left: 150px;
margin-top: 30px;
padding-left: 5px;
border-width: thin;
border-color: #C0C0C0;
font-weight: bold;

}

#name{
  width: 250px;
  positions:absolute;
  margin-bottom: 15px;
  margin-right: 10px;

}

<html lang="en" dir="ltr">
  <head>

    <link rel="stylesheet" href="newp.css"/>
    <meta charset="utf-8">
    <title>test  </title>
  </head>
  <body>
    <form class="bgg" action="index.html" method="post">
    <div class="warp">
      <div class="sidbar">
        <ul>

      <li><a href="#"></i>Home</a></li>
      <li><a href="#"></i>Log out</a></li>

        </ul>
      </div>
    </div>


     </form>
     <form class="bgs" action="index.html" method="post">
       <div class="info">
         <input id="name" type="text"  placeholder="Name" name="" value="">

       </div>

     </form>

  </body>
</html>

图像将很好地描述我的问题。
请帮忙，谢谢。

enter image description here
enter image description here

最佳答案

首先，您应该删除</i>这是不正确的。

错误：

<li><a href="#"></i>Home</a></li>
<li><a href="#"></i>Log out</a></li>

正确：

<li><a href="#">Home</a></li>
<li><a href="#">Log out</a></li>

其次，我不明白为什么您在整个侧边栏都有表单。如果用于注销链接，则应仅将表单放在该li元素内，并使用按钮或输入，而不使用注销链接。

第三，您在绝对位置和固定位置工作很多，这可以更轻松地完成。这样，您必须为每个屏幕分辨率设置不同的位置。

第四，您需要使用Media Queries来使您的网站对移动设备，平板电脑和台式机具有响应能力：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media screen and (min-width: 768px) {
  .warp .info input {
    margin-left: 150px;
  }
}

使用“媒体查询”，可以为每种分辨率分别定义样式。现代Web开发首先尝试使网站具有移动性，这意味着：尝试进行开发，使其在手机上看起来不错，然后将其样式扩展到适合平板电脑和台式机。

我刚刚整理了一下代码，向您展示了它的工作原理。在我的示例中，您可以看到当结果窗口变小时，输入字段的边距会发生变化。

您可以在jsfiddle上找到我的示例：
https://jsfiddle.net/vn7k5r0f/1/

关于html - 调整页面大小时，所有事情都搞砸了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59673849/

上一篇：javascript - 在 JQuery .load() 我的按钮不起作用之后

下一篇：css - 如何正确设置适合不同屏幕的 html 元素的高度？

相关文章：

html - 仅使用 CSS 在悬停时显示下拉菜单并在单击时关闭

css - 现在 Gmail 中是否可以实现 float 或类似的功能？

javascript - Jquery - .forEach() 在 IE8 中不工作

html - 如何使用html和css使文本位于图像的右侧

jquery - 将两个元素对齐在同一行

javascript - 逐行随机分配输入到文本框中的值

html - 在 css 模态中使用标签和输入的替代方法

javascript - 检查一个元素是否在 jquery 中有一个特定的类不起作用

javascript - 无法让滚动动画与 jquery 一起使用

php - jQuery Mobile native 应用程序表单发布到另一个页面