Scaling website content until first breakpoint

Issue

I need to do next behavior on my webssite: until first breakpoint (for tablets) it should just scale without changing of elements positions etc. For example: Website should look similar on 1920×1280 screen and on 1600×900 screen, but on tablets and mobiles i want to use media queries for reform my elements position.

So question is how to allow my website to scale on laptop \ PC screens with different sizes until first breakpoint is reached.

Solution

If I understand your answer at the post of "WizardOfOz" correctly, you just want to "scale the whole page" at breakpoint "1600×900"? Then you can use:

@media(max-width:1600px){
  html {
    transform: scale(0.9); // you can change the "(0.9)" to what you need
  }
}

BUT: this is not a common way. The correct way would be to redefine the elements themselves, also the fonts, like this way:

.MyDiv {
  width: 200px;
  height: 200px;
  font-size: 20px;
}


@media(max-width:1600px){
.MyDiv {
  width: 100px;
  height: 100px;
  font-size: 15px;
  }
}

Answered By – Pepe

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0