如何在不同大小的浏览器窗口中使我的网页看起来很好？

I've got a question about optimizing webpages... hmm, let me start over from the beginning.

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

HTML Code:

<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 Code:

#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;
    }

The problem is that whenever I minimize the window a bit, my divs shrinks together. That's not how I want it to appear. After figuring out a while how to solve this problem I came up with this "great" idea to make a div wrap that cover all the other divs.

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

So then my divs need a wrap right?

那么我的div需要换行吗?

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



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

Now in my css code I need to set the px of height and width of the wrap div, right? Now this will work but the problem is. How do I get to optimize this then on another computer screen? I mean this wouldn't work on all the users right?

现在在我的css代码中我需要设置包装div的高度和宽度的px,对吗?现在这将有效,但问题是。如何在另一台计算机屏幕上进行优化呢?我的意思是这对所有用户都不起作用吗?

Anyway.. Let me repeat the question once again... How do I my webpages to optimize to minimizing windows in the browsers and to work on all screens? I mean everything has to relate to pixels right? Now how the ** is that suppose to work If all the screen has different size's? I mean then you need to use the % to make it work. I don't want you guys to mainly sort of this exactly problem but give me some advice how to generally optimize a webpage in the best way.

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

2 个解决方案

#1

Ok here is what I usally do:

好的,这是我通常做的:

Whenever I want to create a website that doesn't fill 100% of the page I create a wrapper around ALL the content, like you did. You can either do this with fixed values or with % values. In case you want to use % values it's often smart to use min-width or max-width for your wrapper. This way you only need to define fixed values once and all the inner content can be defined by using %. This helps especially if you want to resize the whole content later on, if your realize that it might look better with a little bit more width.

每当我想创建一个不能填充100%页面的网站时,我就会像你一样创建一个包含所有内容的包装器。您可以使用固定值或%值执行此操作。如果您想使用%值,通常可以使用包装的最小宽度或最大宽度。这样,您只需要定义一次固定值,并且可以使用%定义所有内部内容。这有助于特别是如果你想稍后调整整个内容的大小,如果你意识到它可能看起来更好一点宽度。

Height values rarely use % values, only use % values for the height if you are using a fixed height for your container. If you want to create different layouts for different screen resolutions you can always have a look at the @media tag which allows you to create resolution specific css code. This however is only recommended for a small set of resolutions, let's say, 2 different resolutions for desktop computer and maybe 2 different resolutions for mobile phones (4 different css definitions).

高度值很少使用%值,如果您对容器使用固定高度,则仅使用%值作为高度。如果要为不同的屏幕分辨率创建不同的布局,可以随时查看@media标签,它允许您创建特定于分辨率的css代码。然而,这仅推荐用于一小组分辨率,例如,台式计算机的2种不同分辨率,以及2种不同的手机分辨率(4种不同的CSS定义)。

I usually try to use min-width and max-width with % values, and if that isn't possible for example for popup windows or fixed elements like a sidebar I use px values. And if I for example want to support multiple columns for my content if the user has larger screens I make use of @media

我通常尝试使用%值的最小宽度和最大宽度,如果不可能,例如对于弹出窗口或固定元素(如侧边栏),我使用px值。如果我想要为我的内容支持多列,如果用户有更大的屏幕,我会使用@media

I also don't get why you're using absolute positioning. If you just want to center content use margin: 0 auto; on your container. Btw in html5 you can also use the <header> tag if you want to specify a header. Using a div and giving it a class/id isn't wrong but I think you should know that there is some new stuff out there in the world of html5/css3

我也不明白为什么你要使用绝对定位。如果您只想使用内容使用保证金:0 auto;在你的容器上。在html5中,如果要指定标题,还可以使用

标记。使用div并给它一个class / id没有错,但我想你应该知道html5 / css3世界里有一些新的东西

EIDT: Your title is a little bit confusing, since your question is totally different. For website optimization I strongly recommend http://developer.yahoo.com/performance/rules.html or for advanced optimization you can use https://developers.google.com/closure/ and https://code.google.com/p/closure-stylesheets/

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

#2

Four your above code: you can use:

以上四个代码:您可以使用:

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

instead of

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

And to make make your webpage look same when window is re-size or you have to learn abut Responsive Web Development. Start using media queries in you pages. For responsive design use media queries: Here is good example of media queries . Also learn how to use it.

并且当窗口重新调整大小或者您必须学习邻接响应式Web开发时,使您的网页看起来相同。在您的页面中开始使用媒体查询。对于响应式设计,请使用媒体查询:以下是媒体查询的好例子。还要学习如何使用它。

#1