How to Implement @Media Query

[CodeGraphics]

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.](http://codepen.io/anon/pen/IehuE “”)

thank u pls.

[Paulie_D]

Zooming is **not** the same as re-sizing the browser and is (as far as I know) unaffected by media queries.

[Paulie_D]

http://www.scripttheweb.com/css/tut-css/css-media-queries-beginners-guide/

[CodeGraphics]

Check this [codepen](http://codepen.io/alex13/full/IehuE “”) and try zooming out.

[Paulie_D]

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.

[CodeGraphics]

I want a media query that will re-size the text based on the width of browser window.
Help me.

[Paulie_D]

Well I have given you a link. I suggest you do some reading rather than get us to do it for you.

[Kitty Giraudel]

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.

[Paulie_D]

Here….if you can’t get it after this…then I can’t help any further.

http://codepen.io/anon/pen/iuzsF

[CodeGraphics]

Thanks @Paulie_D, I have got it.

[Author]

Posts