1

我有一个关于优化网页的问题......嗯，让我从头开始。

HTML 代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <title></title>
</head>
<body>

    <div id="header"> Text... </div>
    <div id="body"> </div>

</body>
</html>

CSS 代码：

#header
    {
        background-color: green;
        width: 50%;
        height: 25%;
        left: 25%;
        position: absolute;
    }

#body 
    {
        background-color: red;
        width: 50%;
        height: 55%;
        left: 25%;
        top: 25%;
        position: absolute;
    }

问题是，每当我将窗口最小化时，我的 div 就会一起缩小。这不是我希望它出现的方式。在弄清楚如何解决这个问题之后，我想出了这个“好”的想法来制作一个覆盖所有其他 div 的 div 包装。

那么我的 div 需要换行吗？

<div id="wrap"> 
    <div id="header"> </div>
    <div id="body"> </div>
</div>



#wrap {
    width: 600px;
    height: 800px;
    position: absolute;
}

现在在我的css代码中，我需要设置包装div的高度和宽度的px，对吗？现在这将起作用，但问题是。然后如何在另一台计算机屏幕上优化它？我的意思是这不适用于所有用户，对吗？

无论如何..让我再次重复这个问题......我如何优化我的网页以最小化浏览器中的窗口并在所有屏幕上工作？我的意思是一切都必须与像素有关，对吗？现在如果所有的屏幕都有不同的尺寸，** 是如何工作的？我的意思是你需要使用 % 来使它工作。我不希望你们主要解决这个问题，但给我一些建议，如何以最佳方式优化网页。

4

2 回答 2

2

好的，这是我通常做的：

每当我想创建一个不能 100% 填满页面的网站时，我都会像你一样创建一个围绕所有内容的包装器。您可以使用固定值或 % 值来执行此操作。如果您想使用 % 值，使用min-width或max-width用于您的包装器通常很聪明。这样你只需要定义一次固定值，所有的内部内容都可以使用 % 来定义。如果您以后想调整整个内容的大小，如果您意识到它可能会看起来更好一点点宽度，这尤其有帮助。

高度值很少使用 % 值，如果您为容器使用固定高度，则仅使用 % 值作为高度。如果您想为不同的屏幕分辨率创建不同的布局，您可以随时查看@media标签，它允许您创建特定于分辨率的 css 代码。但是，这仅建议用于一小组分辨率，例如台式计算机的 2 种不同分辨率和手机的 2 种不同分辨率（4 种不同的 css 定义）。

我通常尝试使用min-widthandmax-width和 % 值，如果这不可能，例如弹出窗口或侧边栏等固定元素，我使用 px 值。例如，如果我想为我的内容支持多个列，如果用户有更大的屏幕，我会使用@media

我也不明白你为什么使用绝对定位。如果您只想将内容使用margin: 0 auto;集中在您的容器上。顺便说一句，在 html5 中，<header>如果要指定标头，也可以使用标记。使用 div 并给它一个 class/id 并没有错，但我认为你应该知道在 html5/css3 的世界中有一些新东西

EIDT：你的标题有点混乱，因为你的问题完全不同。对于网站优化，我强烈推荐http://developer.yahoo.com/performance/rules.html或者对于高级优化，您可以使用https://developers.google.com/closure/和https://code.google.com /p/闭包样式表/

于 2013-07-22T11:25:25.823 回答
1

四你上面的代码：你可以使用：

#wrap {
margin:0 auto;
    width: 600px;
    height: 800px;
    position: absolute;
}

代替

#wrap {
    width: 600px;
    height: 800px;
    position: absolute;
}

为了使您的网页在窗口重新调整大小时看起来相同，或者您必须学习响应式 Web 开发。开始在您的页面中使用媒体查询。对于响应式设计，使用媒体查询：这是媒体查询的好例子。还要学习如何使用它。

于 2013-07-22T11:25:49.563 回答