代码之家 › 专栏 › 技术社区 › Ali Sheikhpour

如何在响应式设计中替换显示器:没有合适的显示器类型?

css

Ali Sheikhpour · 技术社区 · 4 年前

我有多个元素,有不同类型的显示,比如 .inlineBlock{display:inline-block} 或 .flex{display:flex} 等等,我使用它们如下:

<div class="inlineBlock desktopOnly"></div>
<div class="inlineBlock mobileOnly"></div>
<div class="flex desktopOnly"></div>
<div class="flex mobileOnly"></div>

有些元素应该只在桌面上可见,有些应该只在小屏幕上可见。因此,我定义了两条媒体规则:

@media all and (max-width:768px){
    .desktopOnly{
        display:none;
    }

    .mobileOnly{
         display: what??????
     }
}

@media all and (min-width:768px){
    .mobileOnly{
        display:none;
    }

    .desktopOnly{
         display: what??????
     }
}

如您所见,我不知道如何恢复if元素的原始显示类型,因此当媒体更改时,它会回退到其原始显示类型?我需要在媒体规则中逐一重新定义任何类别吗?是否有一种通用的方法可以同时处理所有元素(最好是 仅CSS 解决方案)?

0 回复 | 直到 4 年前

Temani Afif 4 年前

使用CSS变量。通过将变量设置为,使回退值成为所需的显示 none 或 initial 您设置/重置回退的值。

例子:

.box {
  height: 50px;
  background: red;
  display: var(--d, flex);
}

@media all and (max-width:800px) {
  .box {
    --d: none; /* we hide it here*/
  }
}

@media all and (max-width:400px) {
  .box {
    --d: initial; /* we show it again here*/
  }
}

<div class="box"></div>

对于许多元素,您可以在根级别执行此操作:

div[class] {
  height: 50px;
  margin: 5px;
}

.block {
  display: var(--d, block);
  background: red;
}

.flex {
  display: var(--d, flex);
  background: green;
}

.grid {
  display: var(--d, grid);
  background: blue;
}

@media all and (max-width:800px) {
   :root {
    --d: none;
  }
}

@media all and (max-width:400px) {
   :root {
    --d: initial;
  }
}

<div class="flex"></div>
<div class="grid"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="grid"></div>

考虑到你的例子:

div[class] {
  height: 50px;
  min-width:100px;
  margin: 5px;
  background:red;
  color:#fff;
  font-size:30px;
}

.flex {
  display:var(--d,flex);
}
.inlineBlock {
  display:var(--d,inline-block);
}

@media all and (max-width:768px) {
  .desktopOnly {
    --d: none;
  }
  .mobileOnly {
    --d: initial;
  }
}

@media all and (min-width:768px) {
  .mobileOnly {
    --d: none;
  }
  .desktopOnly {
    --d: initial
  }
}

<div class="inlineBlock desktopOnly">Destop</div>
<div class="inlineBlock mobileOnly">Mobile</div>
<div class="flex desktopOnly">Destop</div>
<div class="flex mobileOnly">Mobile</div>

CSS custom properties (variables) for box model

-1

DesignerFiroz 4 年前

请按如下方式使用

@media all and (max-width:768px){
   .desktopOnly{
      display:none;
   }
   .mobileOnly.inlineBlock{
      display: inline-block;
   }
   .mobileOnly.flex{
      display: flex;
   }
}

@media all and (min-width:768px){
   .mobileOnly{
      display:none;
   }
   .desktopOnly.inlineBlock{
      display: inline-block;
   }
   .desktopOnly.flex{
      display: flex;
   }
}