Question

我对CSS还是很陌生，所以无论如何我每天都要学习，无论如何，我都将下面的代码与@Media标签一起使用，而不是将其拆分为2个Media标签，如何将类合并为1个？

下面是当前代码，它可以工作，但是它的重复代码。

 @media (max-width: 767px){
      .table-fluid td {
          word-break: unset !important;
  }
  }

  @media (max-width: 767px){
      .modal-content {
          width: 92% !important;
  }
  }

我想做类似的事情，希望您能理解我的意思，我更愿意@media (max-width: 767px)被定义一次，请提出一种更干净有效的方法吗？

@media (max-width: 767px){
.table-fluid td {
word-break: unset !important;}
.modal-content {
width: 92% !important;}

Answer 1

 @media (max-width: 767px){
      .table-fluid td {
          word-break: unset !important;
      }
      .modal-content {
          width: 92% !important;
      }
  }

@media (max-with: 900px and min-width: 800px){
   //new media css
}

您可以将所需的所有ID和类写入媒体代码。如果要为其他媒体尺寸制作CSS样式，只需打开一个新的样式即可。

提示：在脚本的最底部写上所有@media标签。

提示2：如果ypu尝试为不同的设备制作网页，则应以活动优先的方式制作，我会为您提供link，以便您可以详细了解它。

提示3：在html头上，写下下一个标签：

   <meta http-equiv="X-UA-Compatible" content="IE-edge" >
   <meta name="viewport" content="width-device-width, initial-scale=1" >

Answer 2

您可以将其编写如下：

@media (max-width: 767px){
  .table-fluid td {
     word-break: unset !important;
  }
  .modal-content {
     width: 92% !important;
  }
}

这些样式类将在屏幕为767px或更少。

将多个类添加到@media标记，为CSS清理高效的编码？

2 个答案: