Question

目标：编写根据屏幕尺寸调整大小的HTML。

大屏幕->“桌面”模式（左右列）
小屏幕->“移动”模式（右列低于左列）

问题：每当我在Outlook / gmail中打开html（屏幕尺寸大大超过768px）时，都会得到“移动”版本。我不知道该如何解决。

<!DOCTYPE html>
    <html>
    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    * {
        box-sizing: border-box;
    }

    .aside {
        background-color: #7a7a7a;
        padding: 15px;
        color: #ffffff;
        text-align: center;
    }
    [class*="col-"] {
        float: left;
        padding: 15px;
    }


    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 50%;}


    @media only screen and (max-width: 768px) {
        /* For mobile phones: */
        [class*="col-"] {
            width: 100%;
        }
    }
    </style>
    </head>
    <body>

    <div class="col-3">
      <div class="aside">
        <p>Some text</p>
      </div>
    </div>
    <div class="col-3">
      <div class="aside">
        <p>More text</p>
      </div>
    </div>

    </body>
    </html>

Answer 1

对我来说，问题出在[class*="col-"]，我有一个朋友的p[class=redbox]也有类似的问题。然后他改为写p.redbox，一切都很好。你可以试试看。

编辑：因此它变成.col-3{your css}而不是[class*="col-"]

电子邮件中HTML大小调整的问题

1 个答案: