将多个类添加到 @media 标签，CSS 的清洁高效编码？

Question

我是 CSS 的新手，所以每天都在努力学习，无论如何，我有下面的代码和 @Media 标签，而不是将它拆分为 2 个媒体标签，我该如何组合类合 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;
  }
}

These style classes will be rendered while screens that are 767px or less.

Answer 2

 @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：如果您尝试为不同的设备制作网页，您应该以移动优先模式制作，我会给您一个 link 以便您可以阅读更多相关信息。

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

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

将多个类添加到 @media 标签，CSS 的清洁高效编码？

Add multiple classes to @media tag, clean efficient coding for CSS?

html

css

mobile

responsive

将多个 类 添加到 @media 标签，CSS 的清洁高效编码？

Add multiple classes to @media tag, clean efficient coding for CSS?

html

css

mobile

responsive

将多个类添加到 @media 标签，CSS 的清洁高效编码？