主页 / 问题 / 1562682
Accepted
Baddy
Asked:2024-01-22 14:30:44 +0000 UTC2024-01-22 14:30:44 +0000 UTC

组合类、媒体查询变量

  • 772

任务是在 root 中为特定类设置一个变量，同时考虑到 @media。也就是说，你需要这样的东西：

@media {
:root {
.class * {
--переменная; 
}
}
}

或者像这样：

@media {
.class * {
:root {
--переменная; 
}
}
}

嵌套在哪种变体中起作用？这可能吗？

css

1 个回答

  1. Best Answer

    根据您的假设，正确的层次结构是

    @media {
  :root selector {
    --variables: value;
  }
}


    :root {
  --size: 100px;
}

body {display: flex; gap: 5px;}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--size);
  height: var(--size);
}

.small-box {
  display: block;
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 2);
}

.red {
  background-color: #f00;
}

.blue {
  background-color: #00f;
}

.purple {
  background-color: purple;
}

.green {
  background-color: green;
}

@media screen and (max-width: 768px) {
   :root .blue {
    --size: 50px;
  }
}
    <div class="box red">
  <div class="small-box purple"></div>
</div>
<div class="box blue">
  <div class="small-box green"></div>
</div>

    但:root我个人不认为这样写有什么意义，因为如果我们在某个类中重新分配一个变量，那么在进一步嵌套时将使用已经更改的变量。

    :root {
  --size: 100px;
}

body {display: flex; gap: 5px;}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--size);
  height: var(--size);
}

.small-box {
  display: block;
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 2);
}

.red {
  background-color: #f00;
}

.blue {
  background-color: #00f;
}

.purple {
  background-color: #800080;
}

.green {
  background-color: #008000;
}

@media screen and (max-width: 768px) {
  .blue {
    --size: 50px;
  }
}
    <div class="box red">
  <div class="small-box purple"></div>
</div>
<div class="box blue">
  <div class="small-box green"></div>
</div>

    • 0

相关问题