Responsive CSS relative to default CSS

Question

I am not sure if this is entirely possible. Want to check here.

Basically what I am trying here is to have a default font size (say 40px). when a media query kicks in I want to change it to reduce to 80% of default font size. Is that possible?

.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>;
   }
}

The reason I am not setting px values is because .text p span gets different class names which will have different font sizes. But they need to scale down in the same ratio. Am I trying that's not achievable?

Asons · Accepted Answer · 2016-11-01 05:39:00Z

3

You could use em, like this, where you set a default on the body, or on any parent you want to inherit font-size from, and adjust from there

Also rem and % is possible alternatives, it all comes down to markup structure etc.

em is relative to its direct or nearest parent, rem is relative to the html (root) - their font-size.

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>

With rem one can do like this

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>

edited Nov 1, 2016 at 5:39

answered Oct 31, 2016 at 23:24

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

paolobasso Over a year ago

Yep just use em or rem (better in my opinion).

user3861559 Over a year ago

jsfiddle.net/c33rnbg4/1 I tried that. Only issue is the "default" font size isn't 2em all time. It could be 40, 60, 80px..anything.. only similarity is that they all scale down in the same ratio. Sorry, should have included markup earlier I got close to final version by moving class to p tag . If there is a way I can do that with class in span tag it'd be great. Worse case adding it to p tag also works.

Asons Over a year ago

@user3861559 Here is an updated fiddle: jsfiddle.net/c33rnbg4/3 ... and updated my answer

Adrianopolis · Accepted Answer · 2016-10-31 23:28:15Z

1

I'm not the biggest fan of ems but if you only want to reduce to 80% use .8em as your strong override of the .text p span size you have set.

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

answered Oct 31, 2016 at 23:28

Adrianopolis

1,2921 gold badge11 silver badges15 bronze badges

Comments

ms_nitrogen · Accepted Answer · 2016-10-31 23:45:39Z

1

It might be worth looking into Sass/Scss for setting variables and having operators applied to them. You can set your variables at the start of your stylesheet, and when you compile your .sass or .scss file, it outputs the correct number in your .css file

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

answered Oct 31, 2016 at 23:45

ms_nitrogen

2403 silver badges14 bronze badges

Comments

tmslnz · Accepted Answer · 2016-11-01 00:21:58Z

It is entirely possible and as you can probably tell there is a number of ways to achieve this. The technique I use is very simple:

Set the font-size on the body and html elements in px, as well as any media query to step the font size up or down, in px.
Use rem units to set the font-size where you need. rem stands for root em, where root is the topmost element in the DOM, usually html or body.

Example:

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; }

Using rem makes it very easy (for me at least) to reason about relative sizes.

em on the other hand is very useful if want a value to be affected by the font-size of the closest parent element.

For example if you wanted to have a padding that scales proportionally to the text size of a .heading, then you'd use 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; }

Collectives™ on Stack Overflow

Responsive CSS relative to default CSS

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related