Question

我有test page。其中有一个.Test_container类应该有一个弹性框列布局，除非最小宽度是768像素。这是媒体查询规则，应该以768像素开始。

@media (min-width: 768px) index.css:1
 .u-md-flex-row {
     -webkit-box-orient: horizontal!important;
     -webkit-box-direction: normal!important;
      -ms-flex-direction: row!important;
      flex-direction: row!important;
 }

如果我取消选中`flex-direction：row，那么布局会在列中呈现。如果我在手机上查看该页面或将宽度缩小到768像素以下，则媒体查询仍然有效。想法？

Answer 1

您必须在头脑中添加元标记

<meta name="viewport" content="width=device-width" />

尝试并测试了您的测试页

Answer 2

为什么你有所有规则！重要？如果可以，你必须尽量避免这种情况。如果你不能，无论如何，我认为你可以使用它：

@media only screen and (min-width: 768px){
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important; 
}

我现在无法测试，但它应该可行

Answer 3

这应该可行尝试了解媒体查询语法您的语法有问题，如果不需要，则不要使用重要的

this.route('route', function() {
  this.route('subroute', function() {
    this.route('subroute-1');
    this.route('subroute-2');
    this.route('subroute-3');
  });
});

媒体查询何时触发？

3 个答案: