如何拥有静态页面布局

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

，我们怎么能有静态页面布局。

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

来源

2013-04-24 divakar.scm

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

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

来源

2013-04-24 06:54:53

感谢您的帮助。但我有一些问题。我们如何知道每台机器的宽度和高度的完整像素。假设如果我设计像素，它与我的机器工作正常，因为我正在测试。我们怎么知道它会在另一台机器上显示为相同的。 – 2013-04-24 07:20:17

在不同浏览器和不同分辨率下测试您的布局。如果你自己没有办法做到这一点，那么有很多商业解决方案将此作为服务提供。 – 2013-04-24 08:11:44

您正在使用%定义高度和宽度的，所以使用px，em代替，因为如果使用%比他们相对于视口分辨率，使用px代替

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

<div></div>

来源

2013-04-24 06:55:06

您可以使用自适应设计来更改网站的样式。例如，“全尺寸”显示器将为主容器使用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/

来源

2013-04-24 07:43:02 lukeocom

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

如果你希望你的网站动态变化时，您的屏幕分辨率的变化，你可以在你的CSS使用％到所有页面，容器，包装材料等，以便它可以在任何屏幕分辨率调整。（问题：这会破坏你的网页设计，只要在屏幕分辨率为大）
最好的解决办法，我觉得到目前为止，我认为其他专业网站也正在做的是让你的宽度静态的或固定的（使用.PX或.em），并让您的页面位于中心。这将保留您在页面上所做的设计，并且所有内容都将保持原样并保持原样。

在你的CSS只需添加上你的页面，容器，包装材料等

保证金这一行：0汽车;

和您的网站将被集中到任何屏幕分辨率。有关更多示例和更多信息，请查看此参考文献How to Center a Website With CSS。如果你想测试不同的屏幕分辨率而不改变你的实际屏幕分辨率，你可以试试here。

希望这会有所帮助:)

来源

2013-04-25 07:53:39 bot

如何拥有静态页面布局

回答

相关问题