0

I've been building sites for a while now and always come across the same issue. All my sites have a boxed with of 1200px and have a 980px tablet breakpoint. Pages always mess up when the viewport is between 1200px and 980px. Text will be cut off on unwanted points and certain stuff doesn't fit properly.

So I thought, is it a good idea to write a little script that when a viewport is less than 1200px it scales using CSS transform. Something like: transform:scale(vieuwportsizehere);. It only scales the page container when it's between 980px and 1200px. So the entire page container including all the content scales to the with of the screen. This way I never have to worry about desktop responsiveness because it will always look exactly the same on every desktop.

This almost sounds too good to be true, doesn't it? Will this work or is this an absolutely stupid idea?

Johannes
  • 64,305
  • 18
  • 73
  • 130
Rein
  • 11
  • Not a stupid idea, but this is not the best way to do Responsive Web Design! Take a look at this answer: https://stackoverflow.com/a/20350990/123033 – Dave Everitt Sep 09 '20 at 14:54

2 Answers2

1

IMO this is not a good idea. Scaling scales everything , also font-sizes, and the result will be rather unreliable. Common practice is to use a percentage width in combination with a max-width in pixels. In your case that could be (for the "page container"):

.page {
  width: 100%;
  max-width: 1200px;
}

that way your page container will always be 1200px wide on large screens. When the screen becomes smaller than 1200px, it will be full width, without cutting off anything.

And of course this can be accompanied by media queries for smaller screens , containing different rules.

Johannes
  • 64,305
  • 18
  • 73
  • 130
0

Without saying it is "stupid idea", it seems a bad idea. You are taking the role of the browser's zoom option (ctrl + mouse wheel), and it will certainly not work well.

Usually the option chosen in this case is having multiple CSS styles for multiple resolution. In your case 2 CSS styles for the 1200px and 980px resolution. For screens larger than 1200px apply the 1200px style, and for smaller resolution apply the 980px style.

To apply a CSS style depending on screen width you can use @media

SeeoX
  • 565
  • 3
  • 18