Menu
I am trying to do a responsive design with using HTML and CSS, here is my problem:
If you only resize the window, the layout fits and if you only zoom, layout fits again, I have no problem with it, but if you zoom when the window is resized, layout breaks a little.
Is it important to find a solution about this? I have no problem with 200%, 300% levels of zoom, mostly 400% or 500% make some problems to me.
806
Use the CSS zoom property to make responsive web development easier. Responsive web development is basically a requirement in 2020. The percentage of mobile users will only continue to rise, so having an website optimized for mobile is absolutely critical if you want to have a meaningful online presence.
Zooming in on a responsive layout For a responsive site zooming in still increases everything, the difference is that the site can use media queries to adapt the layout. If your browser window is 1000 pixels wide on screen and you zoom in to 200%, your effective browser width is 500 pixels.
Responsive web design is divided into three main components: the media query, the web browser, and the responsive web interface itself.
The 3 Major Principles of Responsive DesignFluid Grid Systems. Fluid Image Use. Media Queries.
In general, a responsive layout shouldn't need to be zoomed because it fits the device/browser window and has been designed to be "finger-friendly". To help with that, you can use this viewport to stop users from zooming:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
