我有两个样式表,一个是 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;
如何解决这个问题!我需要在它们上进行过渡,但是有没有办法防止发生跳跃?
最佳答案
问题的根源在于您对所有
属性的转换应用。使用附加的 transition-property
补充这些规则,并包含一个以逗号分隔的仅包含您要转换的属性的列表。例如:
transition-property: opacity, max-height;
这会顺便节省大量计算时间!
关于javascript - 仅适用于智能设备的样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20433493/