Question

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <h3>parent 1 </h3>

    <div my-directive parent="parent" index="0"></div>
    <div my-directive parent="parent" index="1"></div>
    
    <h3>parent 2 </h3>
    <div my-directive parent="parent2" index="0"></div>
    <div my-directive parent="parent2" index="1"></div>

</div>

感谢您的支持，使此代码具有响应性，以便弹出窗口可以在移动设备上查看。

Answer 1

我认为最简单的方法是编写media-query并缩小#popup的宽度以缩小屏幕。

@media only screen and (max-width: 600px) {
  #popup{
    width: 300px !important;
  }
}

如果你可以控制html元素，请避免编写内联样式并将宽度设置为百分比值，这样就不需要编写媒体查询。

此外，仅供参考，如果您不需要支持旧版浏览器，则可以使用transform:translateX(-50%);使#popup水平居中对齐，而不是使用负边距。

希望这会有所帮助。让我知道。

任何提示，以使这个jQuery弹出脚本响应，以便在移动设备上查看

1 个答案: