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/
Related
I'm doing some css code to a website that uses a full cover background and I want to serve it with media queries to a several devices with different resolutions.
I've already figured out how to do that with all the iPhones and iPads doing this:
#media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:1) { /* for the iPhone 2G/3G/3GS */ }
#media only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPhone 4/4S */ }
#media only screen and (min-device-width:560px) and (max-device-width:1136px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPhone 5 */ }
#media only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1) { /* for the iPad 1/2 and iPad mini */ }
#media only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPad 3/4 */ }
And for some desktop screens:
#media only screen and (min-device-width:1280px), only screen and (min-device-width:1366px), only screen and (min-device-width:1440px) { /* some regular desktop resolutions */ }
#media only screen and (min-device-width:1680px), only screen and (min-device-width:1920px) { /* some larger desktop resolutions, likely hd screens */ }
Since the purpose of all this media queries is to satisfy only a full cover background using this css rule in each #media (with different images, obviously, to reduce server load and display a friendly background considering the specs between devices)...
html {
background:url("image.jpg") no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;}
I have my doubts with doing this for retina screens (especially the Macbook Pro Retina, 13inch and 15inch models).
I guess that, using the same logic as above, this should be like this:
#media
only screen and (min-device-width:2560px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width:2560px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width:2560px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width:2560px) and (min-device-pixel-ratio: 2) { /* for the 13inch model */ }
#media
only screen and (min-device-width:2880px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width:2880px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width:2880px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width:2880px) and (min-device-pixel-ratio: 2) { /* for the 15inch model */ }
So... I hope this works in this way.
Also, I would like you to give me some advice on improving this. The main idea is that for each display resolution and device, a different image is served, to avoid overloading both the server and the client side (in this case, the browser).
This is old, but maybe these links help?
CSS Tricks retina display media query
Coder Wall - HD & Retina Display Media Queries
I am having trouble with: http://brybell.me/vipeepz/skeleton/
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
#logo {
margin-top:400px;
position:relative;
}
}
That is the media query code within the layout.css file of the skeleton boilerplate/ framework.
It does not seem to be picking up the media query, I have tried many things and it doesn't seem to be working.
There are two logos now, because I was doing some testing, but I really am just trying to do something simple similar to instagram's website. simple phone image with screenshot and then a logo and block of text beneath.
I would appreciate any and all help. Thank you very much. I have been frustrated with this because I had the site how I wanted it on desktop, but can't get things to reposition to where I want them to be.
Your inline style declaration is overwriting the media query in this case since inline styles have higher specificity. Try moving your inline styles into an external stylesheet and your media query for #logo should be picked up.
I am new to responsive web design, and got confused because there are various preferences about which media queries to use and which devices to target. Is there a standard? I'd like to target iPhone, iPads, and other popular devices.
I have found this on the web:
/* 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 and high pixel ratio devices ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
But I do not know if it is outdated. I do not know which rule targets iPhone 4, because I ran the iPhone simulator and the CSS didn't work (referring to last CSS rule).
My thought with media queries is that your goal should be to make a device-agnostic framework for your website. That means it needs to be both resolution and pixel density aware, given Apple's (and others) push into super high resolution screens.
2018 update: my approach now drops the screen and min-device-pixel-ratio media attributes and uses screen-size ranges. Because every device now registers as screen, and almost all of them are high resolution now - you really don't need those attributes. If you're on a super high traffic site maybe they still make sense though.
Here is how I lay out my breakpoints globally:
/* Below 380px is really just the iPhone SE at this point */
#media (min-width: 380px) and (max-width: 480px) {
/* Most phones fall in here - iPhone, Galaxy, Pixel, etc */
}
#media (min-width: 480px) and (max-width: 768px) {
/* Phablets and Tablets - iPad, Galaxy Note, Pixel Slate, Fire */
}
#media (min-width: 768px) and (max-width: 980px) {
/* Small desktop, large tablet - Macbooks, sub 12" ultrabooks */
}
#media (min-width: 980px) and (max-width: 1200px) {
/* Medium screen desktop (up to about 24") and laptops (13" laptops) */
}
#media (min-width: 1200px) and (max-width: 1600px) {
/* Large screen desktop (27"), laptops (15+") */
}
#media (min-width: 1600px) {
/* Very large screen, 4K desktop + small TVs */
}
2012 advice: I've seen on achieving that dual mandate comes from Chris Coyier's CSS-tricks.com:
http://css-tricks.com/snippets/css/retina-display-media-query/
The concept is to create the initial break points based on size and then have pixel-density media queries follow. This approach gives you three breakpoints, and each breakpoint has a pixel-density-aware option.
Here is Coyier's sample code (I simplified out the vendor-specific prefixes so you can grasp the concept):
#media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
#media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
#media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
#media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
#media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
#media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px){
/* Large screen, retina, stuff to override above media query */
}
I really like this concept: you save bandwidth for older, likely bandwidth constrained devices while giving the new, high-res devices what they need. The only code you would have to put in the pixel-density media queries should be background-image stuff, so the higher-res imagery overrides its pixelated counterpart on older devices.
Realize that you are trying to hit a moving target my friend ;) This is an evolving concept, css-tricks.com, stackoverflow and other blogs seem to be the best way to keep up. Good luck.
The "breakpoints" in your layout are likely to become quickly outdated as new devices with different viewport ratios come on the market. Perhaps rather than target specific devices, I prefer the approach of having breakpoints in your design where you want it to break, rather than bending your design to specific devices.
This article: Device-Agnostic Approach To Responsive Web Design explains it better than I could ever do.
Alternatively, you could refer to some of the most popular frameworks like 320 and Up or Twitter Bootstrap - they are updated very often and should provide you with a good starting point with media query breakpoints.
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.