SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    0 Post(s)
    0 Thread(s)

    Pixels or percentages for media queries

    I am trying to decide on a framework to use and struggle to understand why some use percentages for the media queries while others like Skeleton use pixels for the widths of columns. I thought responsive meant using percentages so they could adapt to the various widths of devices!

    I would very much appreciate an explanation or links to articles.

    Thank you.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    NJ, USA
    65 Post(s)
    2 Thread(s)
    Hi Lynnec,

    Offhand, I'd say it depends on the container being adjusted and it's contents. Fluid first, percent second, pixels where required. Avoid assuming predictable breakpoints. Arrange breakpoints as needed.

    As far as the unit of measure goes, give this a read and see what you think.


  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    182 Post(s)
    6 Thread(s)
    I am trying to decide on a framework to use and struggle to understand why some use percentages for the media queries
    You can't use percent in the media query rule itself if that's what you meant.
    @media screen and (max-width: 50%) {
    	div {
    The above is invalid as percent is not a valid width for the actual media query. It would make no sense because you are saying the media is the screen and when its width is 50% do something. The width of the screen cannot be 50% of itself It is always 100%.

    Usually you would use pixels or ems although other length units can be used apart from percentages.

    Pixels were the obvious choices because they relate directly to device widths and so you know where you are. However as Ron's link above shows there could be issues when the layout is zoomed so ems may be a better option depending on the layout. I do still tend to use pixels for the media queries though as it is easier to manage but am aware that some scaling may not be perfect so its always best to test zooming the layout and see whether the layout needs ems for the media query or whether its ok with pixels.

    The design itself though should preferably be fluid and avoid fixed px widths for large elements. I try to make all large elements in percentages (or just fluid width) and then any fixed width element keep below 320px and then you can just reorganise columns without having to scale everything again in the media query. You can of course do everything with fluid or max-widths but I'm not keep on images that continually scale. I'd rather change them when they need to be changed (when there is no more room for them) and then resize smaller or then change to fluid. It all depends on the layout.

    Breakpoints should be 'design dependent' and not 'device dependent' and in that way you catch all devices on the way.

Tags for this Thread


Posting Permissions

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