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?

user_13140139 0
Viewed 51

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*/
}
}
css html
2 Answers

a combination of CSS var and calc could work, it's CSS3 though and might not work in older browsers.

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

@media only screen and (max-width: 700px) {
    .text--heading {
        font-size: calc(var(--a) * .3);
    }
}
user_11861870

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()

user_56416690
Related