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

标签 javascript jquery html css stylesheet

我有两个样式表,一个是 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/

相关文章:

javascript - 立即输出所有表单填写错误的消息

javascript - 使用 Bootstrap 工具提示和 jQuery 进行验证?

Javascript - 识别事件何时发生并采取行动。

javascript - 用星号屏蔽 HTML 表单文本字段

javascript - 将属性分配给数组 js/jquery 中的值

javascript - 使用jquery获取复选框列表的选中值

html - 调整大小时导航栏元素向下移动

javascript - 为什么递归后事件参数会被遗忘?

javascript - 如何在jquery中的popup中访问Json返回值

jquery - list-style-type CSS 属性的文本值,怎么样?