Scaling page with respect to viewport width
Is there a way to scale a web page completely with respect to viewport width? All components should have the same aspect ratio.
I was thinking this has something to do with the
<meta name="viewport" but not sure.Solution:Jump to solution
afaik there is no way to make your entire website scale according viewport size, otherthan using viewport units on each element: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS#viewport_units
aspect ratio might also be useful there https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio...
MDN Web Docs
aspect-ratio - CSS: Cascading Style Sheets | MDN
The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and ...
MDN Web Docs
Sizing items in CSS - Learn web development | MDN
This lesson has given you a rundown of some key issues that you might run into when sizing things on the web. When you move onto CSS Layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.
1 Reply
Solution
afaik there is no way to make your entire website scale according viewport size, otherthan using viewport units on each element: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS#viewport_units
aspect ratio might also be useful there https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
MDN Web Docs
aspect-ratio - CSS: Cascading Style Sheets | MDN
The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and ...
MDN Web Docs
Sizing items in CSS - Learn web development | MDN
This lesson has given you a rundown of some key issues that you might run into when sizing things on the web. When you move onto CSS Layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.