仅限移动设备上的自适应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

您所拥有的一切应该可以正常工作，但是没有实际的“ Is Mobile / Tablet”媒体查询，因此您总是会遇到麻烦。

有媒体查询常见的断点，但是随着设备范围的不断变化，不能保证它们不断向前发展。

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

为了进一步解决上述问题，将Modernizr与非触摸测试配合使用将使您可以定位最有可能是平板电脑和智能手机的触摸设备，但是使用基于触摸屏的新版本却没有以前那么好的选择。