如何處理放大時我的div被扭曲的問題？

有代碼的兩個問題我已經寫了，我不知道該如何解決：如何處理放大時我的div被扭曲的問題？

如何在網頁上看起來谷歌瀏覽器

Google Chrome

那我的div的兩個列做當我放大和縮小時不會一起縮放。

如果我放大過去一定量時，div小號胸圍他們的容器，完全扭曲了網頁。

enter image description here

Here's有關HTML和CSS代碼，任何人想看看它誰的小提琴。

我希望當用戶放大或縮小放大或縮小div的位置。

編輯：達線＃130是描述了我編寫這個頁面的元素相關的CSS代碼，CSS的其餘部分是從引導和無關（這個問題）

來源

2013-05-14 Louis93

要做到這一點，你必須爲div的寬度或容器寬度分配一個值。像這樣：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style> 
body{ 
     font-size:36px; 
     font-family:Arial, Helvetica, sans-serif; 
     } 
.mega_cont{ 
    margin:0 auto; 
    padding-top:10%; 
    width:710px; 
    } 
.super_cont_lhs{ 
    float:left; 
    width:300px; 
    margin-right:5px; 
    } 

.cont1{ 
    width:100%; 
    float:left; 
    height:auto; 
    background-color:#000; 
    margin-bottom:10px; 
    color:#CCC; 
    } 
.cont2{ 
    width:100%; 
    float:left; 
    height:auto; 
    background-color:#000; 
    color:#CCC; 
    } 
.super_cont_rhs{ 
    width:400px; 
    float:left; 
    height:auto; 
    background-color:#F60; 
    } 
</style> 
</head> 

<body> 

<div class="mega_cont"> 
<div class="super_cont_lhs"> 
    <div class="cont1">P - S P E C T R A</div> 
    <div class="cont2">B E G I N</div> 
</div> 
<div class="super_cont_rhs"> 
P-Spectra enables practicing engineers to design seismic retrofit solutions with supplemental dampers using performance based design. 
</div> 
</div> 
</body> 
</html>

來源

2013-05-19 01:48:36

非常好，謝謝。我通過閱讀乾淨的代碼瞭解了很多。 – Louis93 2013-05-21 02:10:22

什麼是你想要的效果？當他們放大時，就好像整個頁面被縮放了一樣？或者你想要背景等保持靜態，只放大前景內容？

短的，你可以禁用的規模，使這些類型的失真可能永遠不會發生：

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

來源

2013-05-14 01:48:44

我粘貼，根據''，沒有按似乎行爲不同。在小提琴中試試看？我希望這個頁面看起來好像是放大或縮小時的縮放... – Louis93 2013-05-14 01:53:11

坦率地說，你的問題是，一切都是固定的寬度和高度，這意味着如果你改變你的窗口寬度或放大，容器將會重疊，尤其是在使用絕對位置時，您似乎正在做很多事情，請嘗試使用浮動元素重新設計您的佈局。 – 2013-05-14 02:40:18

閱讀這篇文章：http://cameronmoll.com/archives/2009/06/page_zooming_vs_text_scaling/ – 2013-05-14 02:41:33

壞消息是，它是不是傷了你的設計變焦，它的瀏覽器更改尺寸。

嘗試將縮放設置爲50％，然後將瀏覽器窗口更改爲其大小的一半。你的顯示再次正確，不是嗎？

現在將縮放比例保持爲100％，然後更改瀏覽器尺寸。它無論如何都打破了，不是嗎？

當您在維度中混合像素和％時，佈局高度依賴於瀏覽器的大小。爲了避免這種情況，您只能使用像素，或者僅使用％，但不能混合使用。（或混合控制得非常好，你混合它們！）

當你放大，不改變你的瀏覽器的大小，這就像你讓瀏覽器尺寸更小（根據新的縮放因子）

來源

2013-05-17 19:49:42 vals

你必須設計液體頁面。使頁面響應並且您的上述問題將簡單地消失。也爲響應式設計頁面更好地使用bootstrap。 Bootstrap將使您輕鬆設計響應式設計。這裏是鏈接下載引導所有的指令來使用它... http://twitter.github.io/bootstrap/

來源

2013-05-22 07:11:39

您正在查找responsive design。

基本上，使它兩列，而不是3個定位的塊。擺脫所有明確的width s，並失去絕對定位。然後設置display:inline-block（或@ShannonHochkins說你可以使用float:left。我只是喜歡內嵌塊）和基於％的寬度。

這裏亞去：http://jsfiddle.net/daCrosby/Dtcrn/1/

我刪除了很多額外的代碼（<head>，<script>，等等） - 這是不是在你的網站上額外的，它只是使的jsfiddle清潔。

這裏是如何美的2列的一個最基本的例子：

HTML

<div id="nav_bar"> 
     [ ... ] 
    </div> 

    <div id="about_block"> 
     [ ... ] 
    </div>

CSS

#nav_bar, 
#about_block{ 
    display:inline-block; 
    vertical-align:top; 
    margin-left:-4px; 
    width:25%; 
} 
#about_block{ 
    width:75%; 
}

來源

2013-05-22 21:40:54 DACrosby

如何處理放大時我的div被扭曲的問題？

回答

相關問題