Question

我已经制作了几页，其中所有文件都在屏幕分辨率1366x768上进行了测试。但是，当我在1024x768上测试菜单时，图像重叠。这有什么解决方案吗？请帮忙！

这是我的主页.php

<?php session_start();?>
<html>
<head><title>Welcome</title></head>
<style>
 #heading{ text-align:right;font-size: 18px;float:right;margin:35px 20px;}
 a:hover{ color:#BEBEBC; }
 a{ color:black;}
 #img{margin:10px 10px;}
 .box {margin-left: auto;margin-right: auto;}
 .wrapper {display: table-cell;vertical-align: middle;width: 2500px;height:450px;}
 #rectangle {width: 300;height: 200;border-style: solid black;border-radius:5px;border-width:10px;border-color:black;}
 img{opacity: 0.5;filter: alpha(opacity=40); /* For IE8 and earlier */}
 img:hover {opacity: 1.0;filter: alpha(opacity=100); /* For IE8 and earlier */}
 #copyright{text-align:center;color:black;}
 ul{
    padding: 0;
    list-style: none;
}
ul li{
    width: 100px;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 21px;
}
 li{
    width: 100px;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 21px;
//background: #1E90FF;
color:black;
}

ul li a{
    display: block;
    //padding: 5px 10px;
    color: black;
    //background: #B0D8FF;
    text-decoration: none;
}
ul li a:hover{
    color: white;
    //background: #939393;
}
ul li ul{
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
}
ul li:hover ul{
    display: block; /* display the dropdown */
}
</style>
<body background="a6.jpg">
<a href="homepage.php"><img id="img" src="LOGO.jpg" width="150px" height="100px"></a>
<h1 align="center" style="position:absolute;top:30px; left:400px;">MEETING ROOM APPLICATION</h1>
 <div id="heading"><ul>
    <li><a href="homepage.php">Home</a></li>
    <li><?php echo ucwords($_SESSION['usr_name']); ?> &#9662;
        <ul>
            <li><a href="changepswd.php">Change Password</a></li>
            <li><a href="logout.php">Logout</a></li>
        </ul>
    </li>
    <li><a href="UserManual.pdf" target="_blank">Help</a></li>
</ul></div>
<br><br>
<hr width="100%">
<table border="1" width="100%" style="border:black;">
<tr><th align="center" colspan="8" style="border-radius: 5px;border-style: solid;">No. of Booking for Present Day</th></tr>
<tr><td align="center" style="border-radius: 5px;border-style: solid;"><a href="#" style="text-decoration:none;">3-Seater</a></td><td align="center" style="border-radius: 5px;border-style: solid;"><a href="#" style="text-decoration:none;"><?php include('count.php'); ?></a></td>
<td style="border-radius: 5px;border-style: solid;" align="center"><a href="#" style="text-decoration:none;">5-Seater</a></td><td align="center" style="border-radius: 5px;border-style: solid;"><a href="#" style="text-decoration:none;"><?php include('count.php'); ?></td></a>
 <td style="border-radius: 5px;border-style: solid;" align="center" align="center"><a href="#" style="text-decoration:none;">8-Seater</a></td>
 <td align="center" style="border-radius: 5px;border-style: solid;"><a href="#" style="text-decoration:none;"><?php include('count.php'); ?></td></a>
 <td style="border-radius: 5px;border-style: solid;" align="center"><a href="#" style="text-decoration:none;">16-Seater</a></td>
  <td align="center" style="border-radius: 5px;border-style: solid;"><a href="#" style="text-decoration:none;"><?php include('count.php'); ?></td></a>      </tr>
 </table>
 <div class="wrapper">
 <table class="box">
 <tr>
 <td align="center">&nbsp;<a href="#" style="text-decoration: none;"><img src="#" id="rectangle" width="330" height="250" style="border: 10px solid white;border-radius:10px;"><h2 align="center">3-Seater</a></h2><p align="center">This is a 3-Seater room.</font></p></td>
 <td align="center">&nbsp;&nbsp;&nbsp;<a href="#" style="text-decoration: none;"><img src="#" id="rectangle" width="330" height="250" alt="5-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">5-Seater</a></h2><p align="center">This is a 5-Seater room.</font></p></td>
 <td align="center">&nbsp;&nbsp;&nbsp;<a href="#" style="text-decoration: none;"><img src="#" id="rectangle" width="330" height="250" alt="8-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">8-Seater</a></h2><p align="center"><This is a 8-Seater room.</font></p></td>
<td align="center">&nbsp;&nbsp;&nbsp;<a href="#" style="text-decoration: none;"><img src="#" id="rectangle" width="330" height="250" alt="16-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">16-Seater</a></h2><p align="center">This is a 16-Seater room.</font></p></td>
 </tr>
</table>
</div>
</body>
 </html>

Answer 1

使用上面提供的代码，您会发现网站的呈现会因屏幕尺寸而异。例如，当使用iPad或iPhone时，您将无法在页面上滚动。解决这个问题的唯一方法是使用响应式设计，有效地使用感知来计算所需的宽度。

例如，我们在页面上并排放置两个元素，而不是说每个元素的宽度为500px（因为这需要在小于1000px的屏幕上滚动，我们可以说每个元素的宽度为50％，这样，无论屏幕大小如何，元素大小都会根据设备大小。

响应式设计确实是前进的方向，如果不遵循此路径，您将无法解决问题。响应式设计越来越成为标准，你也可以尽快学习，或者冒着被遗忘的风险。

我建议您阅读以下内容，如果您仍然努力，请创建一个针对响应式设计的新问题。

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

您可能还会发现，集成预先存在的响应式模板可能是最快的解决方案，请参阅以下内容：

http://www.responsivegridsystem.com/

http://getbootstrap.com/css/

希望这有帮助。

如何使界面兼容不同的屏幕分辨率

1 个答案: