仅在移动设备上使用响应式 CSS 样式

Question

我正在尝试让我的响应式 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 */

Answer 1

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

我目前正在为我的雇主开发响应式布局，我使用的范围如下：

您的主要桌面样式位于 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 或 %。

Answer 2

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

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

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

为了进一步回答上面的问题，使用 Modernizr 进行非触摸测试将允许您定位最有可能是平板电脑和智能手机的触摸设备，但是随着新版本的触摸屏的发布，这不再是一个像以前那样好的选择是。

Answer 3

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

@media all and (max-width: 600px) and (orientation:landscape) 
{
    /* styles here */
}

Answer 4

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

Answer 5

在极少数情况下（优化的站点运行干净的服务器端代码）有效的替代方法是

1. 检测移动设备（PHP 和 python 近十年来都能够可靠地做到这一点）
2. 在其他文件之后添加您的 mobile.css（因此它会覆盖此）。

*w3schools 建议反过来做；这是针对移动设备进行设计，然后附加一个 .css 文件来调整它是否是桌面站点。由于我倾向于在桌面上进行开发，并且可能只有 15 个 .css 属性需要覆盖（我的大多数网站都是动态的），所以我在桌面上进行移动覆盖。

一个 php 示例（我使用 time() 来防止 .css 缓存） （您可以在这里找到如何在 PHP 中检测手机）

<link rel="stylesheet" type="text/css" href="/css/common.css?t=<?php echo time(); ?>">
<?php
    require_once $_SERVER['DOCUMENT_ROOT'] . '/util/Mobile_Detect.php'; // Mobile_Detect class
    $detect = new Mobile_Detect;
    if($detect->isMobile()) // if the client is a mobile
    {echo '<link rel="stylesheet" type="text/css" href="/css/mobile.css?t='.time().'">'; // add an extra .css to override for mobiles
}
?>