Question

我有

ID ReportTime (DateTime)   InError
1  2017-17-10 03:00:00     False
1  2017-17-10 03:30:00     True
1  2017-17-10 04:00:00     False
1  2017-17-10 05:00:00     False
1  2017-17-10 06:00:00     True
1  2017-17-10 07:00:00     True
1  2017-17-10 08:00:00     False

依旧......

我网站的响应能力（作业）。我首先将css代码放在@media (max-width: 360px), @media (max-width: 320px), @media (max-width: 768px),中，然后当我现在将我的代码放入max-width:360px时，它不会更改大小/边距/填充等。元素。它需要！在它工作之前很重要，这就是为什么我在我的代码中有很多重要的东西，比如：＆＃34; max-width:320px＆＃34;。而且我相信如果我开始为margin-left:240px !important;编码，那么尺寸就不会起作用。有没有办法解决这个问题？帮助我成为初学者。

这是示例代码：

max-width:768px

Answer 1

尝试使用：

@media (max-width: 320px) {
  /* css rules */
}

@media (min-width:321px) and (max-width: 360px) {
  /* css rules */
}

@media (min-width:361px) and (max-width: 768px) {
  /* css rules */
}

依旧......

编辑：我从小视口大小开始，以获得更好的移动拳头支持！

Answer 2

更改订单媒体查询

@media (max-width: 768px) {
    .txtyourrest
    {
        font-size:30px; /*wont work*/
        color:red;
    }
    }
    
    @media (max-width: 360px) {
    .txtyourrest
    {
        font-size:25px; /*will work*/
        color:blue;
    }
    }
    @media (max-width: 320px) {
    .txtyourrest
    {
        font-size:20px ; /*will work*/
        color:yellow;
    }
    }

<div class="txtyourrest">
for the responsiveness of my website(assignment) 
</div>

Answer 3

理想情况下，除非必须，否则您不想使用！重要。相反，您应该利用以智能方式级联媒体查询，以便他们覆盖＆＃34;彼此恰当。

如果你正在使用一系列＆＃34; max-width＆＃34;查询和目的是区分一些东西，因为它变得越来越小，先从你的最大数字开始，然后下去。

如果您正在使用一系列＆＃34; min-width＆＃34;查询和目的是区分一些东西，因为它变大，先从你的最小数字开始然后下去。

最后，你可以将它们组合在一起，这样你只定位那些＆＃34;在＆＃34;之间。查询。有了这些，如果没有一个尺寸同时出现，那么订单并不一定重要。

示例：

＆＃13;

p {
  color: blue;
}

@media (max-width: 500px) {
  /*Everything up to 500px*/
  #small {
    color: purple;
  }
}

@media (max-width: 400px) {
  /*Everything up to 400px*/
  #small {
    color: red;
  }
}

@media (min-width: 300px) {
  /*Everything bigger than 300px*/
  #big {
    color: red;
  }
}

@media (min-width: 400px) {
  /*Everything bigger than 400px*/
  #big {
    color: purple;
  }
}

@media (min-width: 500px) {
  /*Everything bigger than 500px*/
  #big {
    color: blue;
  }
}

@media (min-width: 400px) and (max-width: 499px) {
  /*Everything between 400px and 499px, including those*/
  #between {
    color: purple;
  }
}

@media (min-width: 300px) and (max-width: 399px) {
  /*Everything between 300px and 399px, including those*/
  #between {
    color: red;
  }
}

＆＃13;

<p id="small">Get Smaller</p>
<p id="big">Get Bigger</p>
<p id="between">Only Change for Some</p>

＆＃13;

要查看在此代码段中运行的媒体查询，请点击＆＃34;展开代码段＆＃34;首先，它只打开代码段，然后您可以调整浏览器的大小以查看它。

可以使用！在许多元素中很重要吗？如果不是如何解决这个问题

3 个答案: