I'm setting up the initial basics of a responsive site. I've specified the mobile and tablet sizes but not sure what to do with the desktop version:
Mobile
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}
Tablet
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
Are those two set up correctly in terms of sizes (to roughly industry standards, I know there aren't any as such!)? How can I specify a version above 1024px for the desktop?
/* Mobile */
@media (min-width:320px) {
.tester {
width:100%;
height:500px;
background-color:white;
}
}
/* Tablet */
@media (min-width:640px) {
.tester {
width:100%;
height:500px;
background-color:red;
}
}
/* Desktop */
@media (min-width:960px) {
.tester {
width:100%;
height:500px;
background-color:blue;
}
}
Think about designing it 'mobile first' - i.e. your ordinary CSS should work fine on mobile devices without any media queries, then you add progressively add breakpoints as you feel the design needs them (i.e. when it breaks) and not because of the screen size of any particular device. (That said I do like to check against iPhone, iPad etc. and in both portrait and landscape - but you can still do that by resizing the window through all the possible widths).
It is (in my opinion) considerably easier to get the mobile design working first and add extra code for the desktop than it is trying to squeeze a desktop design back into a mobile version afterwards (also doing the mobile design will make you decide what are the most important bits of the site).
Also, use as few media queries as you can get away with - they only make things harder to understand when you come back to a design a few months later - and if you know or have time to learn a CSS preprocessor like SASS, consider embedding media queries throughout the CSS file as part of the specific classes and IDs that need them, rather than in a section of their own at the end; this should make it more obvious how device size affects a particular element and save you endlessly scrolling back and forth through your code.