Question

我正在尝试为客户开发一个网站，他想要一个简单的启动/登陆页面。

我有以下网站链接

http://www.colmanweb.co.nz/websites/turbos-splash/

左侧的四个图像相当大，因为当您向下滚动互联网浏览器（因此它对移动设备的响应性）或在实际移动设备中查看时，图像会变小，这就是我想要的。

我所追求的是左侧的图像/图标要小得多，以便在互联网浏览器中使用正常的网站，以及缩小手机的所有内容，但图像/图标可在移动设备中查看和点击。

我附上了以下编码

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%"><div id="icons"><img src="images/myteam-btn.png" align="left" width="20%"/></div></td>
    <td rowspan="5"><div id="tnation"><img src="images/turbonation.png" align="left" width="35%"/></div></td>
  </tr>
  <tr>
    <td width="25%"><div id="icons"><img src="images/results-btn.png" align="left" width="20%"/></div></td>
  </tr>
  <tr>
    <td width="25%" height="400px">&nbsp;</td>
  </tr>
  <tr>
    <td width="25%"><div id="icons"><img src="images/tickets-btn.png" align="left" width="20%"/></div></td>
  </tr>
  <tr>
    <td width="25%"><div id="icons"><img src="images/shop-btn.png" align="left" width="20%"/></div></td>
  </tr>
  <tr>
    <td width="25%">&nbsp;</td>
  </tr>
</table>

和继承人css

 body {
background:#009e60;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
div#container {
margin:0 auto;
width:1427px;
height:500px;
}

*{
padding:auto;
margin:auto;
text-align:center;
}

div#tnation {min-width:200%; margin-top:-100px;}

div#icons {min-width:350%}

任何帮助都会很棒！

由于

Answer 1

哦，不，大声笑。这里有很多事情，你不会以聪明的方式解决这个问题。

很少有东西，你可以替换：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

与

<!DOCTYPE html>
<html lang="en">

虽然这根本不是主要问题，但我想提一下。

此外，我们不建议将表格用于布局/设计，它们更适合数据，您应该使用DIV容器（或Span）。

另一件事，你的CSS在这里

div#tnation {min-width:200%; margin-top:-100px;}
div#icons {min-width:350%}

绝对没有做任何事，因为页面上没有DIV容器。

要让某些内容“响应”，您可能需要在CSS文件中的某些位置使用媒体查询。

似乎您对HTML / CSS的理解充其量已经过时，因此在您不熟悉基础知识之前，很难帮助您。

Answer 2

为您的移动网站创建另一个网络应用。您可以使用用户代理检测用户是否正在使用移动设备。 WURFL会很有用。请检查您的密码。你可以做很多改进。

创建HTML + CSS网站供移动使用

2 个答案: