Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Working on a large content project doing some upfront research.
Personally, I like to reference popular frameworks and see what they support. For instance, Zurb's Foundation uses the following breakpoints (and is mobile-first, something to consider...):
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
http://foundation.zurb.com/docs/media-queries.html
Or, you can check out what Bootstrap is doing (again, "mobile first")...
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
http://getbootstrap.com/css/
I like to think that as new devices come out (iPhone 6/6 Plus), those frameworks will be updated as they receive feedback form users.
Hope this helps!
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
What will be width for every devices in bootstrap 3 for responsive if I put .container max-width for large 940 px?
What will be the max-width size in media query for medium, small and extra small devices????
because I want to write media query for every devices for fixing some problem.
Please give answer with code of media query of this...
Those are the media-queries you'll find in core css. You'll have to set your custom widths in order to fix your problem.
If you need to keep proportions, try using Photoshop to scale your 940px, to smallest sizes.
Personally, even when it is okay you overwrite the largest container, I wouldn't overwrite .container for smallest devices. But it depends on you.
You'll have to add a .container and set your custom width inside each media-query.
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
.
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I have past experience of working with foundation. So I started using foundation media queries rules for creating responsive site.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
Here is my problem:
I am trying to hide a menubar in mobiles that is shown in desktop version (like how show-for-small in foundation). So I have defined stylings for mobile inside the media query #media only screen and (max-width: 40em). Surprisingly it is not working . So I have added the following rule before the above mentioned rule, #media only screen { }, then it worked.
I also tried the combination of #media only screen and (min-width:5 em) and (max-width: 40em). It also did not work.
I also have viewport meta tag defined in my page. Can anyone explain me why this is happening so ???
i think the problem maybe related to css specificity ( one command has higher priority)
so what about trying to put
#media only screen and (max-width: 40em)
in the last of your commands
and also inspect element in browser to know if this command is overwrited by other command
this is the most things happen with me when works with bootstrap ,wish this help you
You have to give your element the hide-for-small class so that it won't show up on mobile screens: Know as visibility classes
There are a lot different media queries for mobile screen sizes. It can be overwhelming to accomodate all of them when designing a responsive mobile site. Which are the most important ones to use when designing for mobile? I found this article that does a pretty good job of outlining the available media queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
I'd recommend taking after Twitter's Bootstrap with just these four media queries:
/* Landscape phones and down */
#media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
#media (min-width: 1200px) { ... }
Edit: The original answer (above) was taken from Bootstrap version 2. Bootstrap has since changed their media queries in version 3. Notice that is there is no explicit query for devices smaller than 768px. This practice is sometimes called mobile-first. Everything outside of any media query is applied to all devices. Everything inside a media query block extends and overrides what is available globally as well as styles for all smaller devices. Think of it as progressive enhancement for responsive design.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
Check it out on Bootstrap 3's docs.
Design in percentages and initially optimized for a 15"+ screen.
Review what components you want to see on a phone - just keep essential content and remove elements that don't work or clutter the small screen. These styles can be contained within #media (max-width: 480px) { ... }
As things move to 10" or less, redesign your buttons and interactive components for fingers rather than mouse. #media (max-width: 767px) { ... }
Shrink the width of your browser. When things don't look so good, get in to the console and figure out what styles can be changed or items that need to be redesigned or removed. Mark what screen width they occur at and create a media query.
At the end, review your media queries to see if some of them can be grouped together (ie if you have one at 750 and 767 pixels width, you might just as well with combining them in the 767).
If you are comfortable w jQuery you can add
$(window).resize(function(){
console.log($(window).width());
});
to get the current screen size. Add a few extra pixels for good measure.
The first Twitter Bootstrap code referenced by #cjlarose assumes that you've built your main CSS for a display that is between 980px and 1200px wide, so you're essentially starting with the desktop design and adapting all of the others from it.
I'm glad to see Twitter has changed to "mobile first" in Bootstrap 3. It's one of the most popular approaches to media queries, and the way I prefer to do it. You start from the smallest size rather than from the desktop out.
Note that your particular site may need different queries than what are listed there or on any other list. You should add queries as your content demands, not based on any set template.
Here are some media queries I've found most useful. These are just some examples:
/* Start with baseline CSS, for the smallest browsers.
Sometimes I put this into a separate css file and load it first.
These are the "mobile first" styles. */
...
/* Then progressively add bigger sizes from small to large */
/* Smartphones start somewhere around here */
#media (min-width: 300px) {
}
/* You might do landscape phones here if your content seems to need it */
#media (min-width: 450px) {
}
/* Starting into tablets somewhere in here */
#media (min-width: 600px) {
}
/* Perhaps bigger tablets */
#media (min-width: 750px) {
}
/* Desktop screen or landscape tablet */
#media (min-width: 900px) {
}
/* A bit bigger if you need some adjustments around here */
#media (min-width: 1100px) {
}
/* Widescreens */
#media (min-width: 1500px) {
}
The most important thing is that you may not need all of these, or you might want to change the numbers depending on what your content looks like. I don't think there are any really hard rules about how many or where to put your breakpoints. I'm doing a site right now that happens to only need one breakpoint because the content is pretty simple, but I've also done sites that look more like the code above.
I didn't include the retina display code. That's useful if you're switching out normal-resolution images for high-resolution images on hi-res displays, but otherwise it's not really that useful.
I have been working for a while now with responsive design, and twitter's bootstrap seems to be one of the best responsive frameworks.
But I have a question regarding the media queries. I see in their documentation the following :
/* Landscape phones and down */
#media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
#media (min-width: 1200px) { ... }
And as I'm already testing it, between the 979px and 1200px the layout has no styles so everything will be messed up. So I don't understand the logic in there, could someone explain me please ?
It is supposed that width between 980px an 1199px is default and don't uses special media queries. So, you define all your styles for that width and after that, you justify your styles for other, "non-standard", screens.
I am trying to build a site with iphone / android / ipad compatibility but do not possess these devices. I tried using the Responsinator, but noticed that it was not even picking up my iphone media queries, such as:
/* iphone */
#media only screen and (max-device-width: 480px) {
#wrapper { background-color: red; }
}
The background for #wrapper was not showing up red on the Responsinator's iphone viewer, but on an actual iphone it is. Are there any good free sites or apps that will pick up css media queries so that I can develop for these devices without having to own all of them?
Thank you
I think the reason they're not picked up in "normal" browsers is that you're using max-device-width. If you use max-width instead they'll work "everywhere" (not IE).
I'd also suggest coding mobile first. Instead of starting with the largest resolution and working backwards, start with the smallest and improve the layout as the resolution grows.
Personally I use this code:
/* Default */
/* Little larger screen */
#media only screen and (min-width: 480px) {
}
/* Pads and larger phones */
#media only screen and (min-width: 600px) {
}
/* Larger pads */
#media only screen and (min-width: 768px) {
}
/* Horizontal pads and laptops */
#media only screen and (min-width: 992px) {
}
/* Really large screens */
#media only screen and (min-width: 1382px) {
}
/* 2X size (iPhone 4 etc) */
#media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
}
From: http://stuffandnonsense.co.uk/projects/320andup/