Question

我正在尝试制作一个网站（适用于手机和平板电脑用户），最大宽度为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>

Answer 1

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

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

遗憾的是，由于您不想使用脚本，因此在两台设备上正常使用菜单和其他类似的东西将是一项繁琐的工作。手机上较小的屏幕空间通常会迫使人们设置菜单的方式与平板电脑和个人电脑等大型设备不同。我知道你说你不想使用脚本，但如果你想有效地设计它可能是一个很好的选择。

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

以下是指向网页的链接，该网页提供了如何使用CSS媒体查询的示例。

CSS可调整大小的内容

1 个答案: