Question

我有以下HTML页面。在此页面中，我在桌面和移动浏览器中遇到了不同的问题。

在桌面浏览器中显示所有内容，但图像太大。如果我试着把它变小，那么移动就变小了。那么如何实现它，那么这个图标是否适合这两个地方？
在移动浏览器中border-bottom-style不显示，但在桌面浏览器中显示。那么问题是什么？

HTML：

<body style="height:100%">
  <table width="100%" height="100%" cellpadding="0" cellspacing="0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;" class="homebackground">
    <tr height="10%">
      <td colspan="3" style="background:url(../../stylesheets/images/user_male.png) no-repeat; background-size: contain;border-bottom-style:solid;border-color: #129AA2; border:1">&nbsp;</td>
    </tr>

    <tr height="80%" style="background:url(../../stylesheets/images/Logo_with_Blu_bg.png); background-size:98% 88%;">
      <td colspan="3">
        <table style="width:100%; height:100%;" border="0" cellpadding="0" cellspacing="0">
          <tr style="height:20%;">
            <td align="right" class="mainbodyup"><img src="../../stylesheets/images/phone.png"/></td>
            <td>&nbsp;</td>
            <td class="mainbodyup"><img src="../../stylesheets/images/groupchat.png"/></td>
          </tr>
          <tr height="60%">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr height="20%">
            <td class="mainbodyup"><img src="../../stylesheets/images/recent.png"/></td>
            <td>&nbsp;</td>
            <td class="mainbodyup"><img src="../../stylesheets/images/search.png"/></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr height="10%">
      <td colspan="3" style="background:url(../../stylesheets/images/setting_footer.png) no-repeat; background-size: contain;border-top-style:solid;border-color: #129AA2; border:1">&nbsp;</td>
    </tr>
  </table>
</body>

CSS：

    @media only screen and (min-width: 768px) {
.mainbodyup
{
    height:20%;
    width:33%; 
    padding:0px;
}
.mainbodyup img
{
  max-width:30%;
  margin:auto;
  display:block;
}
}
@media only screen and (min-width: 100px) {
.mainbodyup
{
    height:20%;
    width:33%; 
    padding:0px;
}
.mainbodyup img
{
  max-width:100%;
  margin:auto;
  display:block;
}
}

稍后编辑

我将我的CSS更改为媒体查询。现在我面临的问题是最后一个媒体查询是work.if我互换然后结果也是相同的。两个查询分开工作，但如果我把它们放在一起然后最后一个是工作，那么问题是什么？

Answer 1

如果您想为每个平台（桌面和移动设备）保留相同的 HTML和CSS，则应使用 CSS媒体查询。您可以将其视为good start on the subject.

媒体查询如下所示：

@media only screen and (min-width: 720px) {
    .mainbodyup img
    {
        max-width:100%;
        margin:auto;
        display:block;
    }
}

这个想法是根据宽度选择CSS样式（这里我们使用min-width，但也有max-width）。一个好主意是用百分比表示大小，这样，它可以根据屏幕大小进行缩放。

或者你可以从一个响应式模板开始，然后在它上面构建，例如http://html5boilerplate.com/

Answer 2

您必须反过来使用媒体查询。首先，您以最小100px然后最小768px为目标屏幕。这样，后者将覆盖第一个

如何在浏览器和移动设备中正确显示HTML页面

2 个答案: