[英]How to make interface compatible on different screen resolution
我已經制作了幾頁,其中所有文件的屏幕分辨率均為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']); ?> ▾
<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"> <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"> <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"> <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"> <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>
使用上面提供的代碼,您會發現網站的呈現方式將取決於屏幕大小。 例如,當使用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/
希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.