如何使浏览器/屏幕调整大小时移动div

问题描述：

我使用流体设计构建了一个非常基本的网站，因此在确定div的宽度时使用百分比代替像素值。如何使浏览器/屏幕调整大小时移动div

当我调整浏览器的大小或屏幕大小发生变化时，div不会移动，它们只是调整到浏览器的形状......所以在浏览器更改大小时有效，我希望row1位于顶部，然后col1在自己的行，然后col2在它的行等etc等，我已经用尽了大多数事情，甚至试图从其他人希望他们的div留下来的职位反向工程，倪帮助将是伟大的，因为这是超级恼人的:)

HTML

<DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="layout.css"> 
</head> 

<header> 
    <div class="navbar"> 

    </div> 
</header> 

<body> 
     <div class="row1"> 

     </div> 
     <div class="row2"> 
      <div class="col1"> 

      </div> 

      <div class="col2"> 

      </div> 
     </div> 
     <div class="row3"> 
      <div class="col2"> 

      </div> 

      <div class="col1"> 

      </div> 
     </div> 
</body> 


<footer> 

</footer>

CSS

* { 
    margin:0; 
    padding:0; 
} 

.navbar { 
    position:fixed; 
    width:100%; 
    height:75px; 
    background-color: #c0f4de; 
    top:0; 
    left:0; 
    right:0; 
} 

.row1 { 
    margin-top:75px auto; 
    background-color: #c0f4de; 
    width:100%; 
    height:500px; 
} 

.row2 { 
    width:100%; 
    height:500px; 
} 

.col1{ 
    width:50%; 
    height:500px; 
    background-color: #ffffff; 
    float:left; 
} 

.col2 { 
    width:50%; 
    height:500px; 
    background-color: #eeeeee; 
    float: left; 
}

您的HTML无效。 'DOCTYPE'声明缺少'！'。 “

”和“

这会对此问题起作用吗？ – DCWD

@DCWD它不会但Xufox是正确的，它可以帮助你成为更好的Web开发人员。纠正错误意味着很多。干杯! – 2016-07-25 05:04:03

答

尝试在你的CSS使用media查询。 A media查询严格适用于不同的屏幕尺寸，因此它将适当调整大小。它看起来像这样：

@media screen and (min-width: 400px) and (max-width: 500px) { 
    .navbar { 
     width: 75%; 
    } 
}

我不确定你的意思是“一个'媒体'查询是严格针对不同的屏幕尺寸”。媒体查询还可以区分屏幕分辨率，方向，屏幕形状和许多其他属性。 – Xufox

答

这是您的意思吗？

@media screen and (max-width: 770px) { 
    .col1, .col2, .row1, .row2 { 
     clear: left; 
     width: 100%; 
    } 
};

此外，关于有人说有关有效代码的内容。我认为这不是问题。但是，如果您没有有效的代码，有时候浏览器会做出意想不到的事情。 W3学校有一个验证器可以检查代码是否有效： https://validator.w3.org/

答

你在这里后是什么media queries。

Media queries当它遇到一定的条件时简单地加载CSS。一个简单的开始是这样的：

.col1 { 
    width: 100%; 
} 
.col2 { 
    width: 100%; 
} 

@media all and (min-width: 640px) { 

/* Code that runs when browser width is at least 640px */ 

{ 


@media all and (min-width: 1140px) { 

/* Code that runs when browser width is at least 1140px */ 

.col1 { 
    width: 50%; 
} 
.col2 { 
    width: 50%; 
} 

{

的CSS属性后设置将覆盖以前的属性。如果这太费时，可以使用Bootstrap的grid system进行调查。

如何使浏览器/屏幕调整大小时移动div

相关推荐