Hello friends, pls i need someone who can give me a practical guide on how to implement @media query for about two screen resolutions: largest and smallest.
I want a situation where if one resizes his browser window to the bear less minimum, the browser will still not have a horizontal scroll. But when zoomed out to lowest percentage with ctrl minus, the font sizes and any other will take on the style of the min-width:2400px, which will make everything readable.
I tried only for the 320px, it worked fine. But when zoomed out, the text becomes unreadable. So I now used min-width:2400px to style the page by increasing the font size, margins and paddings. It looked great. But when I now zoomed in to return to the normal 100% window resolution, the font of min-width:2400px refused to change. I want the page to return to the default style set in the css.
Once again, and only to say again what @Paulie_D said twice: zooming is not the same as resizing the browser. You cannot detect user's zoom (which is in most cases 100%).
If you try to reproduce a smartphone view by zooming, you're gonna have a bad time.
Hello friends, pls i need someone who can give me a practical guide on how to implement @media query for about two screen resolutions: largest and smallest.
I want a situation where if one resizes his browser window to the bear less minimum, the browser will still not have a horizontal scroll. But when zoomed out to lowest percentage with ctrl minus, the font sizes and any other will take on the style of the min-width:2400px, which will make everything readable.
I tried only for the 320px, it worked fine. But when zoomed out, the text becomes unreadable. So I now used min-width:2400px to style the page by increasing the font size, margins and paddings. It looked great. But when I now zoomed in to return to the normal 100% window resolution, the font of min-width:2400px refused to change. I want the page to return to the default style set in the css.
Check the codepen.
thank u pls.
Zooming is not the same as re-sizing the browser and is (as far as I know) unaffected by media queries.
http://www.scripttheweb.com/css/tut-css/css-media-queries-beginners-guide/
You can make MQ work with zooming by using ems though!
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Except you need to refresh the page to make it work.
Check this codepen and try zooming out.
I'm not sure what you are trying to achieve.
Either you want media queries which re-size the text based on the width of the browser window OR you want the text to stay the same size when zooming.
The two aren't the same....apart from @CrocoDillons point.
I want a media query that will re-size the text based on the width of browser window. Help me.
Well I have given you a link. I suggest you do some reading rather than get us to do it for you.
Once again, and only to say again what @Paulie_D said twice: zooming is not the same as resizing the browser. You cannot detect user's zoom (which is in most cases 100%).
If you try to reproduce a smartphone view by zooming, you're gonna have a bad time.
Here....if you can't get it after this...then I can't help any further.
http://codepen.io/anon/pen/iuzsF
Thanks @Paulie_D, I have got it.