1

下面是我的代码，它是页面布局。但是如果我们调整浏览器的大小，它会不断变化。

我们如何才能拥有静态页面布局。

<head>
<style> 
body, html { margin:0; padding:0; } 

#wrap { width:100%; height:100%; } 

#header { width:100%; height:15%; text-align:center; border-bottom-style:solid; border-width:thin; background-color:lightyellow; } 

</style> 
</head> 
<body> 
<div id="wrap"> 
    <div id="header"> 
    <br><br><br> 
    <label for="tb2">textbox2</label><input type="text" name="tb2" size="30" maxlength="30" id="tb2"> 
    <input type="submit" name="search" value="search"> 
    </div> 
</div>
4

4 回答 4

1

您可以使用响应式设计来更改网站的样式。例如，“全尺寸”显示将为您的主容器使用 1000 像素的宽度。较小的屏幕尺寸（例如 iPad）可能会设置 600 像素的宽度。移动设备可以使用 300px。ETC...

在你的CSS中它会像这样......

#yourPageContainer{width:1000px;}
#otherElements{background-color:#afa;}

@media screen and (max-width:500px){    
    #yourPageContainer{width:500px;}
    #otherElements{background-color:#aaf;}
}

@media screen and (max-width:300px){
    #yourPageContainer{width:300px;}
    #otherElements{background-color:#faa;}
}

这里的关键是根据屏幕大小为容器设置绝对宽度。

我在这里创建了一个示例http://jsfiddle.net/kxRtv/ - 尝试调整浏览器窗口的大小，看看会发生什么......

这个网站可能会提供一些灵感 - http://mediaqueri.es/

于 2013-04-24T07:43:02.817 回答
1

不要对宽度和高度属性使用百分比，而是使用绝对值（如px, em）。

#wrap { width:100px; height:100px; }

于 2013-04-24T06:54:53.827 回答
1

您%用于定义高度和宽度，因此请改用px,em因为如果您使用%它们是相对于您的视口分辨率的，请px改用

<style>
div {
   width: 100px;
   margin: auto;
}
</style>

<div></div>
于 2013-04-24T06:55:06.177 回答
0

I've encountered screen resolution problem before and this solved my problem.

  • If you want your website to dynamically changing whenever your screen resolution change you can use % in your css to all your page, containers, wrappers etc. so that it will adjust on any screen resolution. (problem: This destroys your web design whenever the screen resolution is big)

  • The best solution I find so far and I think other professional websites also is doing is to make your width static or fixed(use .px or .em) and just let your page get on the center. This will preserve the design you made on your page and everything will stay and looks as it is.

    In your CSS just add this line on your page ,containers, wrappers etc.

    margin:0 auto;

    and your site will be centered to any screen resolution. For more examples and to read more about it check this reference How to Center a Website With CSS. If you want to test different screen resolutions without changing your actual screen resolution you could try it here.

    Hope this helps :)
于 2013-04-25T07:53:39.563 回答