响应 CSS 相对于默认 CSS

Question

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

基本上我在这里尝试的是使用默认字体大小（比如 40px）。当媒体查询启动时，我想将其更改为默认字体大小的 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 获得不同的 class 名称，这些名称将具有不同的字体大小。但是他们需要以相同的比例缩小。我在尝试那是无法实现的吗？

Answer 1

您可以像这样使用 em，在 body 上设置默认值，或者在您想要从中继承字体大小的任何父级上设置默认值，并从那里进行调整

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>

Answer 2

我不是 ems 的忠实粉丝，但如果你只想减少到 80%，请使用 .8em 作为你设置的 .text p 跨度大小的强覆盖。

@media screen and (max-width: 640px){
   .text p span{
      font-size: .8em;
   }
}

Answer 3

可能值得研究 Sass/Scss 来设置变量并应用运算符。您可以在样式表的开头设置变量，当您编译 .sass 或 .scss 文件时，它会在 .css 文件

中输出正确的数字

http://sass-lang.com/guide#topic-8

Answer 4

这是完全可能的，正如您可能知道的那样，有多种方法可以实现这一点。我使用的技巧很简单：

在 px 中的 body 和 html 元素上设置 font-size，以及任何媒体查询以增大字体大小或向下，在 px.
使用rem单位设置你需要的font-size。 rem 代表 root em，其中 root 是 DOM 中最顶层的元素，通常是 html 或 body.

示例：

html, body {
  font-size: 18px;
}

@media screen and (max-width: 320px) {
  html, body {
    font-size: 15px;
  }
}

/*
The rem values use 18px or 15px as the base unit
depending on matching query.

In this case there is no need to use 1rem unless you need to reset
a previously changed value.
*/
.heading { font-size: 1.2rem; }
.small { font-size: 0.8rem; }

使用 rem 可以很容易地（至少对我而言）推断出相对大小。

em 另一方面，如果希望值受最近父元素的 font-size 影响，则非常有用。

例如，如果您想要一个与 .heading 的文本大小成比例缩放的填充，那么您将使用 em:

html, body {
  font-size: 18px;
}

@media screen and (max-width: 320px) {
  html, body {
    font-size: 15px;
  }
}

.heading { font-size: 1.2rem; }
.small { font-size: 0.8rem; }

/*
Now you define a padding that is always 80% of the element's
font-size.
And since .heading is set at 1.2rem, the padding will be 
80% of 1.2rem.
*/
.heading { padding: 0.8em; }

响应 CSS 相对于默认 CSS

Responsive CSS relative to default CSS

html

css

font-size