Question

我有两个样式表，一个是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并开始从1024px以上重新调整宽度，以便应用平板电脑和手机样式表。

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

-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;

如何解决这个问题！我需要转换它们，但是反正是为了防止跳跃发生？

Answer 1

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

transition-property: opacity, max-height;

这样可以节省大量的计算时间！

Answer 2

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

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

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

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

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

2 个答案: