Does CSS media queries allow you to set sizes of elements, for mobile screens, as percentages of sizes already set for the element for web screens?

Issue

I have a code like this:

.text--heading {
    width: 382px;
    height: 55px;
    font-family: Tomica;
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 55px;
    color: #181E4B;
}

I need to make it responsive and decrease lengths, font-sizes etc of most elements.

Does media queries have any facility where i could be able to do something like the following:

@media only screen and (max-width: 700px) {
.text--heading {
 font-size: size /* where size is 30% of size already defined previously*/
}
}

Solution

What you can do is to scale the element, which - if I understand your intentions correctly – should have a very similar outcome, at least for the CSS rule you posted above. So the media query would be as follows (where everything would be 50% of the original size):

@media only screen and (max-width: 700px) {
  .text--heading {
    transform: scale(0.5);
  }
}

See also https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()

Answered By - Johannes