36

我试图让我的响应式 CSS 样式仅适用于平板电脑和智能手机。基本上我有桌面风格，移动风格：纵向和移动风格：横向。我根本不希望移动样式干扰桌面演示。我玩过无数媒体查询，但结果要么移动样式显示在桌面上，要么移动样式仅显示在移动设备上但只有一组规则（无响应）。有没有办法让两者完全分开？

我现在的代码是这样的：

/* regular desktop styles */

@media only screen 
and (max-device-width: 600px)
 { ... }

/* mobile only styles when the device is 0-600px in maximum width */

@media only screen 
and (max-device-width: 1000px)
{ ... }

/* mobile only styles when the device is up to 1000px in maximum width */
4

4 回答 4

32

为什么不使用媒体查询范围。

我目前正在为我的雇主设计一个响应式布局，我使用的范围如下：

您在 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 或 %。

于 2013-12-05T14:16:41.330 回答
12

你有什么应该可以正常工作，但是没有实际的“是移动/平板电脑”媒体查询，所以你总是会被卡住。

有针对常见断点的媒体查询，但随着设备范围的不断变化，它们不能保证继续工作。

这个想法是您的网站在所有尺寸上都保持相同的品牌，因此您应该希望样式在断点之间层叠，并且只更新宽度和位置以最适合该视口。

为了进一步回答上述问题，将 Modernizr 与无触摸测试一起使用将允许您定位最有可能是平板电脑和智能手机的触摸设备，但是对于基于触摸屏的新版本，它不像以前那样是一个好的选择.

于 2013-02-25T07:00:09.320 回答
6

我必须解决一个类似的问题——我希望某些样式仅适用于横向模式的移动设备。本质上，字体和行距在其他所有上下文中看起来都很好，所以我只需要一个移动横向的例外。此媒体查询完美运行：

@media all and (max-width: 600px) and (orientation:landscape) 
{
    /* styles here */
}
于 2015-06-20T15:57:38.720 回答
4

是的，这可以通过 javascript 功能检测（或浏览器检测，例如Modernizr）来完成。然后，使用yepnope.js加载所需的资源（ JS 和/或 CSS ）

于 2013-02-25T06:51:32.307 回答