0

So I'm trying to make a responsive resizing post component in angular and tried to change the size for different screen sizes e.g. making the post look bigger on 4k.
My attempt for this would be native css variables (first tried to use sass variables but then learned that because its just a preprocessor it wont be dynamic which totally makes sense). I have multiple Media queries for different screen sizes and I have a "resize variable" which changes on different queries. With one query everything to work just fine but once I have a second query that changes the variable it doesnt seem to work anymore? I cant find anything explaining this and really want to understand this so can someone explain this to me?

The Code (simplified) :

.post{
  --header-height: 100px;
  --size-factor: 1;
  .posthead{
    height: calc(var(--header-height) * var(--size-factor);
    .{
      img{
        max-height: calc(var(--header-height) * var(--size-factor);
        max-width: calc(var(--header-height) * var(--size-factor);
      }
    }
}

// 4K
@media only screen and (min-width: 4092px){
    .post{
        --size-factor: 2.5;
    }
}

// 2K
@media only screen and (min-width: 2560px){
    .post{
        --size-factor: 1.5;
    }
}

When I only have the query for 4k and inspect in 4k mode everything looks fine and resizes. But once I have the 2k query both wont work.

note :
The values are just for testing. Obviously I wasnt able to find a sweet number yet.

ThatCipherDev
  • 11
  • 2
  • 1
    revert the order of your mediaqueries. when you are looking at 4092px both the mediaqueries are matched but the last one wins (for the cascade). – Fabrizio Calderan May 19 '21 at 10:36
  • 1
    Ah I think I got it - so media queries (also) go from the top to the bottom making the lowest the "strongest"? That would explain a lot. Thanks! – ThatCipherDev May 19 '21 at 10:44
  • 2
    it's not something specific to mediaqueries. It's the C of CSS. All the rules to the _same element_ with the _same specificity_ are applied from the top to the bottom. – Fabrizio Calderan May 19 '21 at 10:46
  • In other words, media queries don't affect the cascade - they are [transparent to the cascade](https://stackoverflow.com/questions/13241531/what-are-the-rules-for-css-media-query-overlap/13611538#13611538). – BoltClock May 19 '21 at 17:44

1 Answers1

0

First you do not have closing bracket at the end of any of your calc statements.

Try to use rem units instead px.

html, body {
  // Set size of the rem unit
  font-size: 16px
}
    
.post {
  .posthead {
    // 6 * 16px = 96px;
    height: 6rem;
    
    img {
      width: 100%;
    }
  }
}

// 2K
@media only screen and (min-width: 1920px) {
  .post {
    .posthead {
     height: 9rem;
    }
  }
}

// 4K
@media only screen and (min-width: 2560px) {
  .post {
    .posthead {
     height: 15rem;
    }
  }
}

2K & 4K resolutions if you want to call them like that are depending more on number of px height wise because there is wide screens also. Anyway you need to exceed size of 1 size under not size of the screen that you targeting. So for example if you want something in your case to show on 4K screen you setting min-width: 2560px not 4092px which is "8K" screen (should be 3840px if you follow that logic because native 4K resolution is 3840x2160px).

Klak031
  • 97
  • 1
  • 1
  • 13
  • Don't worry I just misspelled that and then copied it all over - but on the actual file it was correct! (scss would cry louder than a baby if not). Is it a usual case to use rem or em on other stuff than font-size? I got told thats not what you should do. And the resolution are just approx. :) but somehow I figured a wrong value for 4k! thanks for pointing that out. – ThatCipherDev May 19 '21 at 11:21
  • Don't know who told you that but you should use rem and em all the time. With px you forcing users to have web page how you want and maybe that is not good for them (need the bigger UI to see better for someone with sight problem for example). with rem and em when they zoom browser your whole web page scale properly with that. Or some users may have changed default font size of browser to suit there needs and with px you are forcing them to use size that you set. – Klak031 May 19 '21 at 11:52
  • Here i set font-size to 16px just to show you relation between px and rem but usually you will leave that part out and let user set there browser how they want. most of users have default value of 16px as browser default – Klak031 May 19 '21 at 11:56