求高人指点，如何把下边的单网页代码，实现不同分辨率下自适应大小！因为设计的是按 1920 宽设计的，所以在小分辨率下网页不能完全显示，而且是靠左显示！以下是代码部分：
cnsun · 2014-08-09 17:47:06 +08:00 · 5458 次点击这是一个创建于 3757 天前的主题，其中的信息可能已经有所发展或是发生改变。
<html>
<head>
<title>DRP 系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="__01" width="1920" height="897" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/DRP_01.jpg" width="1920" height="356" alt=""></td>
</tr>
<tr>
<td>
<img src="images/DRP_02.jpg" width="532" height="49" alt=""></td>
<td>
<a href="/hq/"><img src="images/DRP_03.jpg" width="228" height="49" alt=""></a></td>
<td>
<img src="images/DRP_04.jpg" width="52" height="49" alt=""></td>
<td>
<a href="/shop/"><img src="images/DRP_05.jpg" width="228" height="49" alt=""></a></td>
<td>
<img src="images/DRP_06.jpg" width="880" height="49" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/DRP_07.jpg" width="1920" height="492" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
<head>
<title>DRP 系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="__01" width="1920" height="897" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/DRP_01.jpg" width="1920" height="356" alt=""></td>
</tr>
<tr>
<td>
<img src="images/DRP_02.jpg" width="532" height="49" alt=""></td>
<td>
<a href="/hq/"><img src="images/DRP_03.jpg" width="228" height="49" alt=""></a></td>
<td>
<img src="images/DRP_04.jpg" width="52" height="49" alt=""></td>
<td>
<a href="/shop/"><img src="images/DRP_05.jpg" width="228" height="49" alt=""></a></td>
<td>
<img src="images/DRP_06.jpg" width="880" height="49" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/DRP_07.jpg" width="1920" height="492" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
 |
1
lijsh 2014-08-09 17:54:09 +08:00
table的width和height都被写成了行内样式，如果要改成自适应，首先把行内样式的width和height取消，然后根据媒体查询设置不同宽度，最后优化下图片（设置max-width之类），就差不多了。
|
 |
2
ibolee 2014-08-09 21:02:45 +08:00 via Android
楼上 max-width正解，具体可以参考下国外自适应网站的css样式怎么写。
|
Select Language