html - 相对于默认 CSS 的响应式 CSS

Question

我不确定这是否完全可行。想在这里查看。

基本上我在这里尝试的是使用默认字体大小(比如 40 像素)。当媒体查询启动时，我想将其更改为默认字体大小的 80%。这可能吗？

.text p span{
      font-size:40px;
}
@media screen and (max-width: 640px){
   .text p span{
      font-size: <0.8*40px>;
   }
}
@media screen and (min-width: 641px) and (max-width: 1024px){
   .text p span{
      font-size: <0.6*40px>;
   }
}

我没有设置 px 值的原因是因为 .text p span 得到不同的类名，它们会有不同的字体大小。但是他们需要以相同的比例缩小。我在尝试那是无法实现的吗？

Answer 1

您可以使用 em，就像这样，您可以在 body 或任何您想从中继承 font-size 的父级上设置默认值，并从那里进行调整

rem 和 % 也是可能的选择，这都归结为标记结构等。

em 相对于其直接或最近的父级，rem 相对于 html(根)- 它们的字体大小。

body {
  font-size: 20px;
}
.text p span {
  font-size: 2em;
}
@media screen and (max-width: 640px) {
  .text p span {
    font-size: 1.6em;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px) {
  .text p span {
    font-size: 1.2em;
  }
}

<div class="text">
  <p>
    <span>
      Hey there ...
      </span>
  </p>
</div>

使用 rem 可以这样做

html {
  font-size: 40px;  
}

.sampleClass {
  font-size: 20px;
}

@media screen and (min-width: 641px) and (max-width: 1024px){
  .sampleClass span {
	  font-size: 0.8rem;
  }
}
@media screen and (max-width: 640px){
  .sampleClass span{
	  font-size: 0.6rem;
  }
}

<p class="sampleClass">
    This is 20px
    <span>This is relative to the html element when @media kicks in</span>
</p>