CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Rob
Rob

Reputation: 6370

Responsive sizes for a desktop version?

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;
    }   

}

Upvotes: 2

Views: 12238

Answers (3)

William Turrell
William Turrell

Reputation: 3326

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.

Upvotes: 4

imcconnell
imcconnell

Reputation: 844

Chris Coyier has a really good list here:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Generally, though, the code for desktops doesn't need to be 'defined' as such. You don't need to code separately for everything. You'll have 'default' code that applies to everything and should be responsive and dynamic, and then you should only need small changes for mobile and tablet.

A responsive framework is always nice, too. That way, you don't have to worry about it yourself.

Upvotes: 0

Akki619
Akki619

Reputation: 2432

Here you go

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Upvotes: 7

Related Questions