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

Posted 2023-03-06

【中文标题】仅在移动设备上的响应式 CSS 样式

【英文标题】：Responsive css styles on mobile devices ONLY

【发布时间】：2013-02-10 06:36:00

【问题描述】：

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

【参考方案1】：

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

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

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

【讨论】：

这是个坏主意，为什么有这么多不同的 CSS，而发帖者只是要求 1 个粗略的 CSS 来捕获所有内容。问题不是要非常详细，而是要捕获所有移动设备。

【参考方案2】：

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

有 media queries for common breakpoints ，但随着设备范围的不断变化，它们不能保证继续工作。

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

为了进一步回答上述问题，将 Modernizr 与非触摸测试结合使用将允许您定位最有可能是平板电脑和智能手机的触摸设备，但新版本的基于触摸的屏幕并不像曾经是。

【讨论】：

@justinavery 这个解决方案怎么样？ /* normal desktop styles */@media only screen and (max-device-width: 1000px)and (orientation: portrait) ../* styles for smartphones and tablets in portrait mode */@media only screen and (max-device-width: 1000px)and (orientation: landscape) ../* styles for smartphones and tablets in landscape mode */

【参考方案3】：

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

@media all and (max-width: 600px) and (orientation:landscape) 

    /* styles here */

【参考方案4】：

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

【讨论】：

请修复 yepnone->yepnope。 （我也试过，但不能只编辑 1 个字符）