48 
@media only screen and (max-device-width : 640px) {
/* Styles */
}

@media only screen and (max-device-width: 768px) {
/* Styles */
}

这就是我到目前为止所拥有的。我正在开发的移动网站的 PSD 模型是 640 像素宽。另一个是平板电脑版本的网站，是 768px。我能够通过仅使用最大宽度在我的网络浏览器中测试该网站，但现在是时候让该网站在设备上运行了，它仍在呈现常规的全尺寸网页。上面的两个查询是我最好的猜测。我哪里错了？

4

3 回答 3

61

这可以通过 4 级媒体查询来完成：（浏览器支持非常好 - CaniUse）

互动媒体功能

这里的想法是根据设备的功能定位设备。（也就是说，检查倾向于移动目标的设备的大小或分辨率）

指针媒体功能查询设备使用的指针机制的质量。

悬停媒体功能查询用户使用给定设备将鼠标悬停在页面上的元素上的能力。

所以要回答这个问题...

移动设备/桌子的相似之处在于：

1）设备的主要输入机制的准确性是有限的。

这意味着我们可以使用以下媒体查询：

@media (pointer:coarse) {
    /* custom css for "touch targets" */
}


div {
  width: 400px;
  height: 200px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (pointer:coarse) { 
  div {
    background: red;
  }
}
<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#pointer">pointer media feature</a> queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>

Codepen 演示

2) 主指点系统无法悬停

所以我们的媒体查询看起来像这样：

@media (hover: none) { 
   /* custom css for devices where the primary input mechanism cannot hover 
   at all or cannot conveniently hover
}

注意： Chrome/Android 59 之前的版本需要on-demand悬停/任意悬停媒体查询的值。此值后来从规范中删除，Chrome 59 版不再需要此值。因此，要支持旧版本的 Android，您需要

@media (hover:none), (hover:on-demand) { 
  /* custom css for "touch targets" */
}


div {
  width: 400px;
  height: 150px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (hover:none), (hover:on-demand){ 
  div {
    background: red;
  }
}
<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#hover">hover media feature</a> queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>

Codepen 演示

注意：

即使您要将鼠标连接到手机/平板电脑，悬停媒体功能仍然匹配none，因为它们的主要交互模式不支持悬停。

如果我们确实想考虑辅助设备，我们可以使用任意指针和任意悬停功能

因此，如果我们希望将与指针设备连接的移动设备视为“桌面”，我们可以使用以下内容：

@media (any-hover: hover) { ... }

额外阅读

于 2017-03-16T13:43:53.320 回答
9

编辑说明：这是一种特别适用于旧浏览器的方法。已接受的答案已更新为更现代的 CSS，它确实具有使这变得容易的媒体查询。我主要建议将我的旧代码用于特定于旧浏览器的 CSS。

我建议使用以下媒体标签，而不是最初使用特定宽度，或者弄乱方向或任何其他废话……

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
  /* Your click-specific css goes here */
}

你用这些标签做什么？设置悬停和点击与触摸事件的内容。

除了上面提到的灰色区域中的少数设备外，触摸设备的分辨率与桌面设备非常不同。不要——不要——设置设计元素，而是设置导航元素。一些通俗的人可能会说，一些疯狂的 max-width 可能会更好，但是有这么多高清手机，设备 max-width 很快变得无用是荒谬的。

但是，您应该使用宽度媒体宽度查询。但是，不要为最大设备宽度而烦恼，只需最大宽度和最小宽度。让上面的标签解决您的触摸与非触摸用户，让 min-width 与 max-width 根据窗口大小解决并调整站点视觉效果。

此外，使用方向来确定它是否是移动的只是愚蠢的，因为即使是显示器也可以放置在各种方向上（我见过的 3 显示器的常见设置是纵向中心显示器和横向侧显示器。）

对于宽度视图，专注于使您的网站在各种宽度上保持整洁，忽略实际访问它的设备类型，只需确保您的屏幕以各种尺寸清晰显示即可。这是适用于台式机和移动设备的好设计。如果他们将您的网站放在屏幕左上角的一个小窗口中以供参考（或快速分散注意力），同时在其他地方使用他们的大部分屏幕空间，那么对于他们以及移动用户来说，您的较小的宽度是专为。尝试任何其他方法很快就会让 Web 开发走上一条非常痛苦和弄巧成拙的道路。因此，对于那些较小的宽度，您可以将宽度设置为任何您想要的，但我会包括一些我个人喜欢的。

所以总的来说，你应该有这样的东西......

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
    #touch_logo {
       display: inherit;
    }
    #mouse_logo {
       display: none;
    }
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
    #touch_logo {
       display: none;
    }
    #mouse_logo {
       display: inherit;
    }
  /* Your click-specific css goes here */
}
@media (min-width: 541px){
  /* Big view stuff goes here. */
}
@media (max-width: 540px) and (min-width: 400px){
  /* Smaller view stuff goes here. */
}
@media (max-width: 399px){
  /* Stuff for really small views goes here. */
}

不过，不要忘记在页面头部包含以下内容：

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

在某些情况下它可能仍然会中断，但这应该比许多其他解决方案更简洁和更完整。

于 2015-03-27T17:54:25.047 回答
2

您的主要桌面样式位于 CSS 文件（1024 像素及以上）的正文中，然后用于特定的屏幕尺寸：

@media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

这将涵盖几乎所有正在使用的设备 - 我将专注于为范围末端的尺寸（即 320、480、568、768、800、1024）设置正确的样式，而对于所有其他设备，它们只是响应可用的大小。

另外，不要在任何地方使用 px - 使用 em 或 %

于 2017-08-02T10:57:37.573 回答