Question

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

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

这是我到目前为止所拥有的。我正在研究的移动网站的PSD模型是640px宽。另一个是该网站的平板电脑版本，为768px。我只能使用max-width在我的网络浏览器中测试网站，但现在是时候让这个网站在设备上运行了，而且它还在渲染常规的全尺寸网页。以上两个问题是我最好的猜测。我哪里错了？

Answer 1

这可以通过4级媒体查询来完成：（Browser Support is quite good - CaniUse）

Interaction Media Features

这里的想法是基于功能来定位设备。（就像说，检查设备的尺寸或分辨率，它们往往是移动目标）

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

hover媒体功能会询问用户是否可以将鼠标悬停在使用指定设备的网页上的元素上。

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

移动设备/表格类似于：

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

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

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

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

Codepen Demo

2）主要指向系统无法悬停

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

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

NB：版本59之前的Chrome / Android需要hover / any-hover媒体查询的on-demand值。此值后来从版本59中删除了规范和no longer required by Chrome。因此，要支持您需要的旧版Android，

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

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

Codepen Demo

<强> NB：

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

如果我们确实要考虑辅助设备，我们可以使用the any-pointer and any-hover features

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

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

额外阅读

Answer 2

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

@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 */
}

你用这些标签做什么？设置悬停和放置的东西点击vs触摸事件。

除了上面灰色区域中的少数设备之外，触摸设备的分辨率与桌面设备的分辨率差异很大。请不要这样设置设计元素，而是设置导航元素。有些学生可能会哭，因为最大宽度的一些疯狂可能会更好，但有那么多高清手机，设备最大宽度很快变得无用是荒谬的。

但是，应该使用宽度媒体宽度查询。但是，不要担心max-device-width，只需要max-width＆amp;最小宽度。让上述标记解决您的触摸与非触摸用户的问题，根据窗口大小设置最小宽度与最大宽度地址，并调整网站视觉效果。

此外，使用方向确定它是否可移动只是愚蠢，因为即使是显示器也可以放置在不同的方向（我见过的3个监视器的常见设置是纵向中央监视器和横向监视器。）

对于宽视图，专注于使您的网站在各种宽度上清洁，忽略实际访问它的设备类型，只需确保您的屏幕以各种尺寸干净地显示。这是适用于桌面和移动设备的优秀设计。如果他们将您的网站放在他们屏幕左上角的一个小窗口中以供参考（或快速分心），同时在其他地方使用他们的大部分屏幕空间，应该是他们以及移动用户，更小的宽度是为。尝试其他任何事情很快就会成为网络开发的一条非常痛苦和自我挫败的道路。所以对于那些较小的宽度，你可以设置你想要的宽度，但我会包括一些我个人喜欢的宽度。

总而言之，你应该有这样的东西......

@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" />

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

Answer 3

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

@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或％

如何编写针对所有移动设备和平板电脑的CSS媒体查询？

3 个答案:

Interaction Media Features

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

Codepen Demo

2）主要指向系统无法悬停

Codepen Demo

额外阅读