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 {
width:300px;
background:blue;
margin:auto;
}
}
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.