Question

我正在学习HTML，CSS和响应的基础知识。我为移动设置了@media查询，但它不起作用。

但是，如果我从桌面（Chrome）打开网站，并尝试调整窗口大小，则可以正常工作。

HTML

<html>

    <head>
       <link rel="stylesheet" type="text/css" href="style.css">
    </head>

<body>

    <div class="div1">
        <p class="txt">dig</p>
        <p class="test">- DIG</p>
        <div class="we"></div>
    </div>

    <div class="div2">
        <p class="txt">dig</p>
        <p class="test">Magni</p>
        <div class="we"></div>

    </div>

    <div class="div3">
        <p class="txt">dig</p>
        <p class="test">Grillo</p>
        <div class="we"></div>
    </div>
</body>

</html>

CSS

body {
    margin: 0px;
}

.div1 {
    height: 100%;
    width: 33.3%;
    background-color: darkgrey;
     float:left;
}

/*.we {
    height: 200px;
    width: 50%;
    background-color: lightcoral;
    margin-left: 165px;
}*/

.div2 {
    height: 100%;
    width: 33.3%;
    background-color: darkslategray;
    float:left;
}

.div3 {
    height: 100%;
    width: 33.3%;
    background-color: darkorange;
    float:left;
}

.txt {
    text-align: center;
    color: black;
    font-size: 100;
    padding-top: 50%;
}

.test {
    text-align: center;
    font-size: 50;
    color: antiquewhite;
}


/* - - - - - - - - - - - - - - - - - - - */

@media screen  
  and (max-width: 320px)
  and (orientation: portrait)  {

    body {
        margin: 0px;
    }

    .div1 {
        height: 500px;
        width: 100%;
        background-color: darkgrey;

}

     .div2 {
        height: 500px;
        width: 100%;
        background-color: darkslategrey;

}

     .div3 {
        height: 500px;
        width: 100%;
        background-color: darkorange;

}

    .txt {
        text-align: center;
        color: black;
        font-size: 50;
        padding-top: 25%;
}

    .test {
        text-align: center;
        font-size: 25;
        color: antiquewhite;

}

}

如果你想测试它，你可以继续：sinh.altervista.org

我该如何解决？每个设备的真实媒体查询是什么？在网上我发现了很多不同的@media查询。

Answer 1

您必须使用meta标记内的viewport代码head来指定文档的呈现方式。

例如：

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes, minimal-ui">
    <link rel="stylesheet" type="text/css" href="style.css">    
  </head>

注意：以上示例详尽无遗，在您的情况下<meta name="viewport" content="width=device-width, initial-scale=1">应该足够，但如果您想管理缩放，用户缩放等，可以添加这些属性......

width=device-width：

这意味着浏览器将（可能）呈现宽度页面在其自己的屏幕宽度。

取自此处：https://css-tricks.com/snippets/html/responsive-meta-tag/

和initial-scale=1会使缩放比例为1

从W3C的草稿中，以下是您可以使用的content属性的属性：https://drafts.csswg.org/css-device-adapt/#meta-properties。

来自MDN的更多文档：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

我的响应式网站无法在移动设备上运行

1 个答案: