Scaling website content until first breakpoint-CodePudding

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 1920x1280 screen and on 1600x900 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.

CodePudding user response：

Maybe just wrap all your elements in a container width a max width of 1600px? That should keep all child elements intact as the window width grows. Then have it responsive from 1600px and below?

.container{
  max-width:1600px; // or whatever your largest size
  height: auto;
}

@media(max-width:1600px){
  // Your css for screens smaller than 1600px
}

<section class ="container">
  <div ></div>
  <div ></div>
  <div ></div>
</section>

CodePudding user response：

If I understand your answer at the post of "WizardOfOz" correctly, you just want to "scale the whole page" at breakpoint "1600x900"? 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;
  }
}