css media queries

[ianhaney]

Hi

I am building a new website and am using media queries so is responsive, can anyone just quickly confirm the following media query breakpoints I am using are ok and I am using px in each media query for the div id and classes, are px ok to use?



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

}


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

}

@media only screen and (min-width : 768px) and (max-width: 1024px) {

}

@media only screen and (min-width : 1224px) {

}

@media only screen and (min-width : 1824px) {

}


Thank you in advance

[Beverleyh]

can anyone just quickly confirm the following media query breakpoints I am using are okOk for what? Your design? We can't comment as you haven't provided a link.

As a general rule, you should set media queries when your content/layout needs to be adjusted, rather than trying to chase commonly reported device sizes.



I am using px in each media query for the div id and classes, are px ok to use?Its unclear what you mean. You can use px sizing units wherever you like but relative units, such as (r)ems, %, vw, etc., are geared better for responsive design. It depends on usage.

If you need more help, please clarify your requirements and provide code samples to illustrate issues or problems.

[ianhaney]

Hi Beverley

For example, below is the site I am currently working on using the media queries

http://www.broadwaymediadesigns.co.uk/sites/faceit/index.php

I did try building it using % and not media queries but kept facing issues like the menu would not be responsive and would always go onto two lines

Would you say this is a good example template

http://www.onextrapixel.com/2011/09/12/create-a-responsive-web-design-template/

[Beverleyh]

I didn't mean that you should use relative units *instead* of media queries. You can set a media query whenever your design calls for one. For example, when switching a menu layout from a vertical mobile layout to a horizontal layout when the design/screen gets wide enough to accommodate it.

The linked template is a good basic example in terms of demonstrating a change of layout and font-size at different screen sizes. However I wouldn't use it verbatim due to the unecessary vendor prefixes (not needed anymore in newer browsers), and indeed all the unecessary transitions, particularly on width, which is expensive in terms of performance (more so on mobile), because it will cause lots of repaints as the browser tries to recalculate the layout during viewport width changes. This can be the downfall on mobile - I've seen websites that use this method crash feeble mobile browsers on orientation change - they (sometimes) can't cope with the layout shift if the design is complex, or other tabs are open. You may have experienced it too.

[ianhaney]

Hi

What do you mean by vendor prefixes, sorry

I tested a quick site using the coding from that link I gave and looked and seemed all ok on my mobile browser safari

if that link is not a good example as such, do you know of a better one

[Beverleyh]

Try Googling "what are vendor prefixes" to find an explaination of what they are.

The onextrapixel link may *seem* ok to the unknowing eye, or on the one device you're testing on, but take it from cleverer people than me; Transitioning certain CSS properties (such as width and height and other *layout* properties) can be "expensive" so there's no point in forcing browser repaints (and therefore extra performance overheads) when there is little benefit or without weighing up the overall impact - especially on low-performance/older mobiles that you might not necessarily have access to test on, but which your web visitors are likely to use. Try to keep the mobile versions as lean as possible. You might like to Google "CSS transitions and mobile performance" for more information. Here's a good overview from Google https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance

Sorry, I don't use templates so I can't recommend any. I would only use tutorials like this as a starting point for your own projects - pay more attention to the underlying concept/principles that they're trying to illustrate in order to successfully use them in your own builds.

It may help if you research "getting started with mobile first responsive design" to find more tutorials or concept demos.

[ianhaney]

Thank you, I found out what vendor prefixes are now and am currently looking at the google link you provided and looking into getting started with mobile first responsive design