我的响应式网站在手机上无法使用

我正在学习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查询。

来源

2017-02-19 dig

你必须指定如何您的文档应该用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

来源

2017-02-19 11:37:57

我的响应式网站在手机上无法使用

回答

相关问题