Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    140
    Thanks
    52
    Thanked 0 Times in 0 Posts

    Question about media query

    Do we really need to put the min-width? or max-width is enough? I dont really understand what the min-width are for. I set media query using only maxwidth and its working.

    I only do something like this :

    @media only screen and (max-width: 1200px)

    @media only screen and (max-width: 940px)

    @media only screen and (max-width: 767px)

    @media only screen and (max-width: 480px)

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,729
    Thanks
    6
    Thanked 1,016 Times in 989 Posts
    You can put whatever you think is appropriate for your application. If you put min-width and max-width, the styles within that query are only applied under this condition (i. e. if the viewport is smaller or larger the styles are not applied). If you only put max-width the styles will always get applied, even if the viewport is just 1×1px large, until the maximum width is reached, and not above.

    Using only max-width is useful if you have styles that are supposed to be applied for all viewports smaller than a certain size. Using min-width and max-width together is useful if you want to completely change (or disregard) styles outside of that range.

    Usually you have some global styles that should be applied without limitation (like font family, page background, etc.) and then you use the media queries to apply additional styles just under a certain condition. This can either be mutually exclusive (using min-width and max-width) or by overriding older styles (using just max-width).
    Last edited by VIPStephan; 04-04-2014 at 08:12 AM.

  • #3
    Regular Coder
    Join Date
    Jan 2010
    Posts
    140
    Thanks
    52
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    This can either be mutually exclusive (using min-width and max-width) or by overriding older styles (using just max-width).
    I just have it on my mind that min-width are useless at all. Thanks for the informative response sir.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •