-1

我正在尝试制作一个最大宽度为 500 像素且没有最小宽度的网站（适用于手机和平板电脑用户）。

两个角落都有一个图像，不应该调整大小，中间的应该在角落图像留下的空间中调整大小。（我不想使用 javascript）所以有人可以帮我解决这个问题吗？

这是我的css和html代码：

#container {
max-width: 500px;
margin: 0 auto;
position: relative;
}
#top_left{
background: url( '../images/top_left.png' ) no-repeat;
width: 19px;
height: 48px;
float: left;
}
#top_center {
background: url( '../images/top_mid.png' ) repeat-x;
max-width: 461px;
height: 48px;
float: left;
}
#top_right {
background: url( '../images/top_right.png' ) no-repeat;
width: 20px;
height: 48px;
float: right;
}

和html：

<div id="container">
  <div id="top_left"></div>
  <div id="top_center"></div>
  <div id="top_right"></div>
  <div class="cb"></div>
</div>
4

1 回答 1

0

在 CSS 中使用 @media 查询来确定手机和平板电脑的页面大小。您可以将网站设置为根据用户使用的屏幕大小进行调整。

例如，如果您的网站有两列。您可以对其进行设置，以便在类似于平板电脑的屏幕尺寸下，两列是并排的。然后，如果在手机上访问它，它会将第二列向下移动到第一列下方，以将页面更改为单列布局。

不幸的是，由于您不想使用脚本，因此让菜单和其他类似性质的东西在两种设备上正常工作将是一项乏味的任务。手机上较小的屏幕空间通常会迫使人们设置与平板电脑和个人电脑等较大设备不同的菜单。我知道您说过您不想使用脚本，但如果您想有效地进行设计，这可能是一个不错的选择。

http://webdesignerwall.com/tutorials/css3-media-queries

这是一个网页链接，其中提供了如何使用 CSS 媒体查询的示例。

于 2013-05-30T13:46:28.930 回答