如何使瀏覽器/屏幕調整大小時移動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; 
}

來源

2016-07-25 DCWD

您的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%; 
    } 
}

來源

2016-07-25 05:01:46

我不確定你的意思是「一個'媒體'查詢是嚴格針對不同的屏幕尺寸」。媒體查詢還可以區分屏幕分辨率，方向，屏幕形狀和許多其他屬性。 – Xufox

這是您的意思嗎？

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

此外，關於有人說有關有效代碼的內容。我認爲這不是問題。但是，如果您沒有有效的代碼，有時候瀏覽器會做出意想不到的事情。 W3學校有一個驗證器可以檢查代碼是否有效： https://validator.w3.org/

來源

2016-07-25 05:29:55

你在這裏後是什麼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進行調查。

來源

2016-07-25 05:30:16

如何使瀏覽器/屏幕調整大小時移動div

回答

相關問題