针对目标移动设备（第一）、平板电脑和桌面设备的特定媒体查询

Posted 2023-03-06

【中文标题】针对目标移动设备（第一）、平板电脑和桌面设备的特定媒体查询

【英文标题】：Specific media queries for target mobile (first), tablet & desktop

【发布时间】：2013-01-15 03:45:02

【问题描述】：

我正在构建一个响应式布局，默认情况下首先从移动设备（1 列）开始，然后是横向和纵向模式下平板电脑的断点，最后是桌面。

对于我的平板电脑（1 列）我有断点。

@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) @media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: Landscape)

但对于桌面，我正在使用的设计的布局（2 列）的最大宽度仅为 976 像素。

是否可以仅针对桌面（最小宽度 976 像素）同时阻止平板电脑媒体查询获取它们？如果在桌面上小于 976px，它应该适应移动布局。

【问题讨论】：

针对设备的特定尺寸的问题在于它们可能会发生变化。最好使用natural breakpoints，如我对类似问题的回答中所述。

Media Queries: How to target desktop, tablet and mobile?的可能重复

【参考方案1】：

使用 Modernizr (http://modernizr.com/download/) 检测触摸设备。 Modernizr 会将 .touch 或 .no-touch 类添加到您的 html 标记中。因此，对于桌面，您将使用.touch 类来定位桌面。

@media only screen and (min-width: 960px) 
    .touch .container  width: 960px; 

【参考方案2】：

我不是这方面的专家，但我确实使用媒体查询设计了一个网站。 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 最好坚持这里给出的查询标准，以免以后网站成型时弄乱你的css。

@media only screen (min-device-width: 1024px)

这应该适用于您的桌面。