Question

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

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

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

Answer 1

请勿将百分比用于宽度和高度属性，而应使用绝对值（例如px，em）。

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

Answer 2

您正在使用%来定义高度和宽度，因此请改用px，em，因为如果使用%而不是相对于视口分辨率，那么使用px代替

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

<div></div>

Answer 3

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

在你的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/

Answer 4

之前我遇到了屏幕分辨率问题，这解决了我的问题。

如果您希望您的网站在屏幕分辨率发生变化时动态更改，您可以将css中的％用于所有页面，容器，包装等，以便在任何屏幕分辨率上进行调整。（问题：当屏幕分辨率很大时，这会破坏您的网页设计）
到目前为止我找到的最佳解决方案，我认为其他专业网站也在做的是使您的宽度静态或固定（使用.px或.em），然后让您的页面占据中心位置。这将保留您在页面上所做的设计，一切都将保持原状并保持原样。

在您的CSS中，只需在页面上添加此行，容器，包装等。

保证金：0自动;

并且您的网站将以任何屏幕分辨率为中心。有关更多示例并了解有关它的更多信息，请查看此参考How to Center a Website With CSS。如果您想在不改变实际屏幕分辨率的情况下测试不同的屏幕分辨率，可以尝试here。

希望这有助于：）

如何拥有静态页面布局

4 个答案: