html - 偏移路径的 CSS 媒体查询

问题描述

偏移路径的 CSS 媒体查询在移动设备上不起作用（最大宽度：480 像素）。它适用于桌面分辨率（1280px 720px）。在移动视图（280px 150px）上，移动元素断开偏移路径并根据桌面分辨率继续沿现有偏移路径移动。不确定为什么它不起作用？有什么我想念的吗？

这是下面的代码片段：

body {
overflow: hidden;
}
.obj {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 0px;
  offset-rotate: auto 30deg;
  offset-path: path('m60.72977,154.26244c0,0 41.05513,-142.64096 228.95326,-126.12023c170.42622,14.98454 119.16333,457.14878 290.30674,454.03282c164.91069,-3.00249 252.53349,-444.03609 302.27815,-435.81545');
  animation: move 10s infinite linear;
  }
.path {
position: absolute;
width: 980px;
height: 500px;
}
.map {
position: absolute;
top: 0px;
left: 0px;
}
 @keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

@media only screen and (max-width: 600px) {
  .container, body, .map, .path {
    max-width: 280px;
    height: auto;
    }
  .path {
    max-width: 280px;
    height: 150;
    }
  .obj {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 0px;
  top: 0px;
  }
  }

<svg class="path" width="980" height="500" viewBox="0 0 980 500" data-name="Layer 1" version="1.1">
 <g>
  <title>Layer 1</title>
  <metadata id="svg_34">image/svg+xml</metadata>
  <metadata id="svg_117">image/svg+xml</metadata>
  <metadata id="svg_132">image/svg+xml</metadata>
  <g id="svg_134">
   <path d="m60.72977,154.26244c0,0 41.05513,-142.64096 228.95326,-126.12023c170.42622,14.98454 119.16333,457.14878 290.30674,454.03282c164.91069,-3.00249 252.53349,-444.03609 302.27815,-435.81545" id="svg_130" stroke-width="1px" stroke="#000000" fill="none"/>
  </g>
 </g>

</svg>

<svg class="obj" xmlns="http://www.w3.org/2000/svg" width="37" height="24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd"><path fill="none" d="M18 .5v6.1364" stroke-linecap="square"/><path fill="#cff" d="M15.0303 8.0717h5.9394v4.0191h-5.9394z"/><path d="M23.5152 3.3637h0c0 3.3465-2.3636 5.8565-5.5152 5.8565s-5.5151-2.51-5.5151-5.8565h0zm-1.697 6.7177v7.0844c0 3.3339-1.6364 5.8343-3.8182 5.8343s-3.8182-2.5004-3.8182-5.8343v-7.0844z" fill="#ffc"/><path fill="#000" stroke="#262626" d="M11.6364 12.0909h12.7273v2.2967H11.6364z"/><path fill="#cff" d="M.5 9.7045h11.1364v8.1818H.5z"/><g fill="none"><path d="M.5 11.75h11.1364M.5 13.7954h11.1364M.5 15.8409h11.1364"/><path d="M2.8864 9.7045v8.1818m3.1818-8.1818v8.1818M9.25 9.7045v8.1818"/></g><path fill="#cff" d="M24.3636 9.7045H35.5v8.1818H24.3636z"/><g fill="none"><path d="M24.3636 11.75H35.5m-11.1364 2.0454H35.5m-11.1364 2.0455H35.5"/><path d="M26.75 9.7045v8.1818m3.1818-8.1818v8.1818m3.1818-8.1818v8.1818"/></g></svg>
  </div>
</body>
</html>

标签： htmlcss

html - 偏移路径的 CSS 媒体查询

问题描述

解决方案

推荐阅读