2

我编写的代码中有两个问题我不确定如何解决：

页面在 Google Chrome 上的外观

谷歌浏览器

当我放大和缩小时，我的两列divs 不会一起缩放。

图片

如果我放大超过一定数量，div他们会破坏他们的容器并完全扭曲网页。

在此处输入图像描述

这是任何想要查看它的人的相关 HTML 和 CSS 代码的小提琴。

当用户放大或缩小时，我希望 div 的位置可以放大或缩小。

编辑：直到第 130 行是描述我为此页面编码的元素的相关 CSS 标记，其余的 CSS 来自 Bootstrap 并且与此无关（与此问题有关）

4

5 回答 5

2

你想要的效果是什么？当他们放大时，就好像整个页面都被缩放了？或者您希望背景等保持静态并且只放大前景内容？

除此之外，您可以禁用比例，以便永远不会发生这些类型的扭曲：

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

于 2013-05-14T01:48:44.060 回答
1

坏消息是破坏设计的不是缩放，而是浏览器尺寸的变化。

尝试将缩放设置为 50%，然后将浏览器窗口更改为一半大小。你的显示又是正确的，不是吗？

现在将缩放保持在 100%，只需更改浏览器尺寸。无论如何它都会破裂，不是吗？

当您在尺寸中混合像素和百分比时，您的布局高度依赖于浏览器的大小。为避免这种情况，您可以仅使用像素，或仅使用 %，但不能混合使用。（或者在你混合它们的地方很好地混合控制！）

当您放大并且不更改浏览器尺寸时，就像您将浏览器尺寸变小（根据新的缩放系数）

于 2013-05-17T19:49:42.647 回答
1

为此，您必须为 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-19T01:48:36.737 回答
0

你必须设计液体页面。使页面具有响应性，您的上述问题就会消失。同样对于响应式设计页面，最好使用引导程序。Bootstrap 将使您轻松进行响应式设计。这是下载引导程序所有使用说明的链接... http://twitter.github.io/bootstrap/

于 2013-05-22T07:11:39.620 回答
0

您正在寻找响应式设计。

基本上，将其设为两列而不是 3 个定位块。摆脱所有显式widths，并失去绝对定位。然后设置display:inline-block（或@ShannonHochkins 说你可以使用float:left。我只是更喜欢内联块）和基于 % 的宽度。

来吧：http: //jsfiddle.net/daCrosby/Dtcrn/1/

我删除了很多额外的代码（<head>,<script>等） - 这不是您网站上的额外代码，它只是让 jsFiddle 更干净。

这是一个简单的示例，说明如何 mae 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-22T21:40:54.337 回答