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

你有什么工作应该没问题，但是没有真正的“移动/平板电脑”媒体查询，所以你总是会陷入困境。

有media queries for common breakpoints，但随着设备范围不断变化，它们无法保证向前移动。

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

为了进一步解决上述问题，使用带有非触摸测试功能的Modernizr，您可以使用最有可能是平板电脑和智能手机的触控设备，但是新版本的触控式屏幕不是一个很好的选择。曾经是。

Answer 3

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

Answer 4

我必须解决类似的问题 - 我希望某些样式仅适用于横向模式下的移动设备。基本上，字体和行间距在每个其他上下文中看起来都很好，所以我只需要移动视图的一个例外。这个媒体查询工作得很好：

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

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

4 个答案: