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

我已經做了幾頁，其中所有的文件在屏幕分辨率1366x768測試。但是當我在1024x768上測試它時，菜單&圖像重疊。有沒有解決這個問題的方法？請幫忙！如何使界面兼容不同的屏幕分辨率

這是我homepage.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>

來源

2015-06-02 AK_56