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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (13)
@media only screen and (max-device-width : 640px) {
/* Styles */
}

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

到目前为止,这就是我所拥有的。PSD模型的移动网站我正在工作,是640 px宽。另一个,这个网站的平板电脑版本,是768 px。我能够在我的网页浏览器中测试这个网站的最大宽度,但是现在是时候让这个站点在设备上工作了,它仍然呈现出正常的完整的网页。以上两个查询是我的最佳猜测。我哪里出错了?

提问于
用户回答回答于

我建议使用以下媒体标记,而不是最初使用特定的宽度,或者乱搞方向,或者任何其他的胡说八道。

@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触摸事件。

除了上面提到的灰色区域中的一些设备之外,触摸设备的分辨率与桌面设备非常不同。这不是设置设计元素,而是导航元素。有些老鼠可能会哭着说,一些疯狂的最大宽度可能会更好,但有太多的高清手机,这是荒谬的,设备-最大宽度很快就会变得无用。

但是,你使用宽度媒体宽度查询。不过,不要费心于最大的设备宽度,只是最大宽度和最小宽度.。让上面的标签定位你的触摸和不接触用户,让最小宽度和最大宽度地址基于窗口大小和调整站点。视觉...

此外,使用定位来确定它是否是移动的只是愚蠢的,因为即使是监视器也可以放置在不同的方向(我在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" />

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

用户回答回答于

这可以通过第4级媒体查询来完成

交互媒体特征

这里的想法是根据它们的能力...(如其目的),检查大小分辨力移动目标的设备)

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

悬停媒体特征查询用户在页面上的元素上悬停在给定设备上的能力。

所以为了回答这个问题..。

移动设备/表类似于:

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
}

注:版本59之前的Chrome/Android需要on-demand值用于悬停/任意悬停媒体查询。这个值后来从规范中删除。因此,要支持旧版本的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 since their 初等交互模式不支持悬停。

如果我们真的想二次考虑到我们可以使用的设备任意指针和任意悬停功能

因此,如果我们希望将与指向设备连接的移动设备视为“桌面”,我们可以使用以下方法:

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

扫码关注云+社区