如何为桌面和移动设备做移动设备友好的 CSS答案

【问题标题】：How to do mobile devices-friendly CSS for both desktop and mobile devices如何为桌面和移动设备做移动设备友好的 CSS
【发布时间】：2014-06-05 05:36:46
【问题描述】：

这可能是我的无知，但我认为欢迎任何有机会区分对错的新手问题。

对于响应式和适合移动设备的设计，我正在使用

@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。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

max-width 是正确的方法。您是否在 HTML 页面中放置了 de viewport 元标记？

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

【讨论】：