小编Gea*_*eat的帖子

我们的设计师正在他的 4k 显示器上测试一个响应式网站。断点之一如下：

<link rel="stylesheet" media="all and (min-width: 1000px)" href="/css/desktop.css" type="text/css" />
<link rel="stylesheet" media="all and (min-width: 640px) and (max-width: 999px)" href="/css/tablet.css" type="text/css" />

足够简单。他设法在 999 到 1000 像素之间找到了一个点，在那里 CSS 损坏并且页面失灵。经过一些严重的挠头后，这解决了问题：

<link rel="stylesheet" media="all and (min-width: 640px) and (max-width: 999.9px)" href="/css/tablet.css" type="text/css" />

当我用谷歌搜索时，我找不到任何关于在媒体查询中使用分数像素的信息。它甚至是一件事吗？这是最好的方法，还是有更好的选择？

我们正在开发一个相当复杂的场景，其中包含许多移动部件，到目前为止还没有涉及任何 SVG 动画。

一切都很顺利并且表现良好，直到我们引入了一个带有几条虚线的 SVG，我们使用 stroke-dashoffset 属性对它们进行了动画处理。

它在 Edge 或 Firefox 中完全没有区别，但在 Chrome 中，整个场景的动画变得断断续续和缓慢。

我们甚至尝试了两种方法来达到相同的目的——CSS 关键帧和 SVG 元素内的 SMIL——但两者的表现同样糟糕。

是否有我们缺少的 Chrome 性能技巧？

编辑：示例

标记：

.stream {
  animation: stream 10s infinite;
}

@keyframes stream {
  100% {
    stroke-dashoffset: 100;
  }
}

<svg version="1.0" id="streams" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 225.32 66.19" enable-background="new 0 0 225.32 66.19" xml:space="preserve">
      <path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" d="M107.38,50.54c0,0-6.78-84.52-106.51-22.2" />
      <path class="stream" fill="none" stroke="#000" stroke-width="1.75" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3,4" d="M110.49,45.31c-0.63-13.01-4.56-44.87-27.83-43.8c-27.6,1.27-37.33,39.66-38.49,60.34"/>
      <path class="stream" fill="none" stroke="#000" …

如果我有以下 HTML 标记：

<div class="wrapper">
  <div id="container-1">
    <div class="child-1-1"></div>
    <div class="child-1-2"></div>
  </div>
  <div id="container-2">
    <div class="child-2-1"></div>
    <div class="child-2-2"></div>
  </div>
</div>

我可以将flex的显示应用到wrapper，然后使用order使container-2出现在container-1之上。