Grow your CSS skills. Land your dream job.

How to Implement @Media Query

  • # March 6, 2013 at 8:10 am

    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.

    # March 6, 2013 at 8:13 am

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

    # March 6, 2013 at 8:25 am

    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.

    # March 6, 2013 at 8:27 am

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

    # March 6, 2013 at 8:30 am

    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.

    # March 6, 2013 at 8:43 am

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

    # March 6, 2013 at 9:05 am

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

    # March 6, 2013 at 11:06 am

    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.

    # March 6, 2013 at 11:14 am

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

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

    # March 7, 2013 at 1:22 am

    Thanks @Paulie_D, I have got it.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".