Question

这可能是我的无知，但我认为任何新手问题都是受欢迎的，因为它有机会区分是非。

对于响应式和移动设备友好的设计，我使用

@media only screen and (max-width: 800px){}

从一开始就成功了。但是，当我将网站上传到服务器并从移动设备浏览网站时，它无法正常工作。然后我学会了使用

@media only screen and (max-device-width: 800px){}

现在它正常工作（注意：中间的-device。）

但是当-device到位时，我无法在台式机中开发网站时看到预览。因此，当我开发时，我在没有-device的情况下使用，并且在上传后我在中间使用-device。这对我来说有点奇怪。

最近我遇到了一个面试板，在那里我提交了一个我的移动设备友好网站供审阅，但是当他们调整浏览器大小时，它无法正常工作，因为在我使用的实际网站-device在媒体查询中。所以，对我来说有点奇怪。

是否有一种方法可以编码，以便代码既可以在桌面上使用其媒体查询，也可以在移动设备中使用。我试过了

@media only screen and (max-width: 800px) and (max-device-width: 800px) {}

但在桌面上失败了。：（

有办法吗？

要承认这一点，我以正确的方式，我正在使用

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

在我的<head></head>标记中。并使用Respond.min.js。

Answer 1

 @media  screen and (min-width: 321px) and (max-width:960px){
    xxxx

}
@media screen and (min-width: 720px) and (max-width:1024px){
       xxxxx
}

Answer 2

max-device-width是设备渲染区域的宽度，

max-width是目标显示区域的宽度

max-width是最合适的方式。您是否在HTML页面中放置了de viewport元标记？

<meta name="viewport" content="width=device-width, initial-scale=1>