Question

我知道媒体查询是什么以及使用它们的原因，但我不确定如何使用它们开发移动网站的最佳方式。

示例：我的mysite.com有一个包含所有必要样式的样式表（让我们说它是一个非常大的文件）。此时，我的所有样式都没有针对较低的屏幕分辨率或其他设备。

然后我决定制作我的网站的移动版本。为了方便起见，我现在只针对iPhone用户，如果代码检测到有人在iPhone上访问我的网站，他们会获得移动版本。

我的问题：包含这些额外样式的最佳位置在哪里，以便用户看到移动版本？我应该在原始样式表中包含这些样式，还是如果我将它们分成自己的样式表会更好？

假设我的网站完全使用花车构建，但我的移动版本只会显示每个元素堆叠在一起。如何使用媒体查询显示？它就像声明float：none一样简单;还是什么？

基本上，我在上面的段落中要求的是，我如何构建我的样式表，例如，基本颜色和链接位置或移动版本中存在的任何内容，如桌面版本但是在移动版本中存在诸如堆叠所有内容之类的差异？

样式表的媒体查询部分中的规则是否基本上“覆盖”您在非媒体查询部分声明的内容？

我发现了很多使用媒体查询的例子，但我找不到一个完整网站的工作示例。如果我在同一个HTML页面中链接了一个mobile.css和main.css，它们如何协同工作以保留我的网站在移动版本中的某些方面但更改其他方面？

最后一个问题：是否可以采用完全固定宽度的设计，但仍然使用媒体查询？代码仍然能够检测浏览器何时收缩或扩展超过某个宽度/高度，是否正确？

对不起这个漫长且可能令人困惑的问题感到抱歉。我希望你能说出我想问的问题。

Answer 1

有（至少！）四种方法可以做到这一点：

普通CSS，底部有媒体查询（因此它们会覆盖上面的CSS）
使用链接元素上的媒体查询加载两个（或更多）CSS文件
在HTML中添加不同CSS链接的服务器端检测
服务器端检测然后重定向到m.example.com或example.com/mobile

如果你正在谈论微小的变化（浮动：无，不同的字体大小等），那么我会去1。如果CSS有很多很多变化，我会使用2或3（3不是很好，因为你依赖于useragents，而不是屏幕属性）。如果HTML和CSS发生变化，我会使用4。

对于所有这些，请检查您在Internet Explorer 6 - 8中的工作，如果您使用1，他们可能会忽略媒体查询并使用所有CSS，包括移动位。

有关使用1和2的网站的一些示例，请查看http://mediaqueri.es/。

这是另一个可能有用的资源：https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

Answer 2

我建议不要愚弄移动浏览器/设备检测;这是媒体查询优秀的地方。更有机地思考，而不是必须使用新设备和移动浏览器不断更新您的网站，只需使用一个CSS文件，并使用CSS3的max-width / max-device-width。

将<meta name="viewport" content="width=device-width"/>放在标题中，然后在CSS文件中将其解析为桌面版和移动版：

/* Desktop Version */

@media screen {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

/* SmartPhone Version */

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/m_bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

Answer 3

我不建议选择3.嗅探已被证明是一次又一次糟糕的选择。当设备/浏览器显示错误信息时会发生什么？它很容易被劫持。

不要这样做。媒体一直查询。这是受支持的标准。

Answer 4

我建议选项3.

用户代理嗅探检测设备并不错。多年来，它一直是创建移动网站的常量。使用PHP device detection，您可以在不同设备上更好地控制您的网站。您不仅可以选择CSS文件到哪个设备，还可以选择每个设备类别加载哪些资产/标记;手机，平板电脑，台式机，电视等。

使用此方法，您可以确保移动设备未接收桌面资源/样式/标记，反之亦然，即使禁用了JavaScript也是如此。

使用媒体查询进行移动设计的最佳方式

4 个答案: