仅适用于智能设备的样式表答案

【问题标题】：Stylesheet for smart devices only仅适用于智能设备的样式表
【发布时间】：2013-12-06 21:00:27
【问题描述】：

我有两个样式表，一个是 core.css，另一个是 tablet-and-mobile.css，如下所示：

<link rel="stylesheet" type="text/css" href="assets/css/core.css">
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="assets/css/tablet-and-mobile.css" />

转到www.loaistudio.com 并开始将宽度从 1024 像素以上重新调整到以下，以便应用平板电脑和手机样式表。

你能注意到元素在跳跃吗？那是因为其中一些有：

-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

如何解决这个问题！我需要对它们进行转换，但有没有办法阻止跳跃的发生？

【问题讨论】：

平板电脑和移动设备没有可调整大小的浏览器窗口。因此，这不是问题。无论如何，调整浏览器窗口的大小并不是一种常见的操作，而且真的不值得担心。
你完全正确，我同意！这只是我的客户将用来查看响应式网站示例的模板，这是他们将不断调整大小和使用的模板。请问有什么办法可以解决吗？ ://
@Blazemonger 是对的：智能设备没有可调整大小的视口，真正的桌面用户不会花时间不断调整视口大小来查看会发生什么。
您（可能还有所有其他开发人员）需要向您的客户解释，调整浏览器大小并不是真正的用例，也不是响应式设计的重点。在每台设备上为用户提供优化的内容；这就是响应式设计的重点。
@Mathletics 你的陈述被误导了。真正的用户可以并且将调整他们的浏览器大小。这就是响应式设计。自适应设计正在为设备提供优化的内容。当用户调整浏览器大小时，人们期望内容流畅地移动是非常现实的。

标签： javascript jquery html css stylesheet

【解决方案1】：

问题的根源是您将转换应用到all 属性。用额外的transition-property 补充这些规则，并包含一个逗号分隔的列表，其中仅包含您要转换的属性。例如：

transition-property: opacity, max-height;

这会顺便节省大量的计算时间！

【讨论】：

我可以这样做吗？ transition-property: width 0.2s ease-out;
@Leo 绝对！如果您有多个要转换的属性，但希望它们都共享相同的转换属性（速度、缓动），则上述方法会有所帮助。
Older browsers don't support transitions，但在示例代码中使用前缀会在一定程度上缓解这种情况。
所以我基本上在之前添加了-webkit-,-moz-等？
所以它会像-webkit-transition-property: width 0.2s ease-out;

【解决方案2】：

我刚刚回答了一个关于这个的问题，只是相反。您需要对查询应用 -device- 调用，使其仅影响手机和平板电脑。

media="screen and (max-device-width: 1024px)"

如果您在 CSS 文件本身中有此调用，它将是： @media only screen and (max-device-width:1024px) 或您想要定位的任何 device-width。

这是一个很好的设备查询网站：www.stephentgilbert.com/mediaqueries/

【讨论】：

我应该说，您的示例不需要@media。你刚试过media="screen and (max-device-width: 1024px)"
这里是另一个要查看的站点：css-tricks.com/resolution-specific-stylesheets 关于基于设备提供 CSS 而不仅仅是浏览器宽度