I'm looking for a list of generic CSS media queries to match phone (both portrait and landscape), tablet (both portrait and landscape) and desktop.
I have found many posts with some generic media queries, but they are often different and maybe I don't understand them.
For instance, the following query:
#media only screen and (max-width: 768px) { }
does it match all phones (portrait and landscape) and tablet portrait? Or what?
I also found other examples, like the following:
/* 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) { }
and
/* mobile */
#media screen and (max-width:767px) { }
/* tablet */
#media screen and (max-width:1024px) { }
Which of the previous queries are correct to correctly match phone (both portrait and landscape) and tablet (both portrait and landscape)?
Thanks
Best way to use media queries, like Marcos said is to use resolutions. Your first code #media only screen and (max-width: 768px) { } will target all the devices that have maximal screen resolution of 768px. So if your phone have a resolution of 640px it will affect it, if your phone have a bigger resolution of 768px the code you enter in {} will be ignored. Usually this is used to make responsive designs, and you use queries with different resolutions for different devices (you can easily find online the most common queries).
Hope it helps.
Related
I'm doing a website that is supposed to work on mobile devices. I have researched about the subject and every website recommends that I use a different media query for each device I intend the website to work on, for example:
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* etc... */
However I feel it would be much much simpler to just use one media query for landscape and another for portrait orientation, but I haven't found anyone recommending that.
I imagine you may want to design something more specific for tablet. But speaking only about mobile phones, I can only thing of a reason to have different media queries for each device if you want something CRAZY specific.
Is there any reason for it?
Should I add a media query for each device or is it "safe" to continue with only two media queries?
That's absolutely fine. Don't forget to add the responsive meta tag to every page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and then use media queries as you resize your preview window width and height. That'll make the website same as the desktop version.
You can totally pull it off with just one or two media queries. I do it all the time for tablet and then for mobile in fully responsive sites that work on all devices. Those type of fleshed out media queries are for very specific sizes when the developer wants to have a set version of the site for this size and that size.
#media screen and (max-width: 1024px) {
/* Landscape style changes */
}
#media screen and (max-width: 768px) {
/* Portrait to mobile style changes */
}
#media screen and (max-width: 450px) {
/* Maybe one more because that header text doesn't fit anymore on smaller screen */
}
It will be as good the rest of your code, but if you have clean css this should not be a problem.
There is NO problem with it, as far as I see it.
You make your site Responsive for not only the browser window (resizing) but also Adaptive on specific devices. Adding and on those media queries is good too if you see how it behaves (target) on Android phones since your breakpoint basis are iPhone.
You may consider creating another .css file for phone/mobile, the same goes for others (Tablet, TV, etc).
w3schools - media queries
Put all your mobile queries on separate .css. Facebook did the same m.facebook.com.
I'm working on responsive designed web site using media queries. But i do not know how to take a good width set.
As you can see on this table, there is a lot of different resolution even for a single type of device. And as resolution is coming bigger and bigger on mobile device, it is hard to know what design to apply for a specific resolution.
For now, I'm using this :
Mobile First
#media screen and (min-width:720px) => Phablet
#media screen and (min-width:768px) => Tablet
#media screen and (min-width:1024px) => Desktop
Thank you for any advice or recomendations !
Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience
When you design your responsive website you should consider the size of the screen and not the device type. The media queries helps you do that.
If you want to style your site per device, you can use the user agent value, but this is not recommended since you'll have to work hard to maintain your code for new devices, new browsers, browsers versions etc while when using the screen size, all of this does not matter.
You can see some standard resolutions in this link.
BUT, in my opinion, you should first design your website layout, and only then adjust it with media queries to fit possible screen sizes.
Why? As I said before, the screen resolutions variety is big and if you'll design a mobile version that is targeted to 320px your site won't be optimized to 350px screens or 400px screens.
TIPS
When designing a responsive page, open it in your desktop browser and change the width of the browser to see how the width of the screen affects your layout and style.
Use percentage instead of pixels, it will make your work easier.
Example
I have a table with 5 columns. The data looks good when the screen size is bigger than 600px so I add a breakpoint at 600px and hides 1 less important column when the screen size is smaller. Devices with big screens such as desktops and tablets will display all the data, while mobile phones with small screens will display part of the data.
State of mind
Not directly related to the question but important aspect in responsive design.
Responsive design also relate to the fact that the user have a different state of mind when using a mobile phone or a desktop. For example, when you open your bank's site in the evening and check your stocks you want as much data on the screen. When you open the same page in the your lunch break your probably want to see few important details and not all the graphs of last year.
Here is media queries for common device breakpoints.
/* 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 */
}
/**********
iPad 3
**********/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
The screen widths Bootstrap v3.x uses are as follows:
Extra small devices Phones (<768px) / .col-xs-
Small devices Tablets (≥768px) / .col-sm-
Medium devices Desktops (≥992px) / .col-md-
Large devices Desktops (≥1200px) / .col-lg-
So, these are good to use and work well in practice.
Take a look at this...
http://getbootstrap.com/
For big websites I use Bootstrap and sometimes (for simple websites) I create all the style with some #mediaqueries. It's very simple, just think all the code in percentage.
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
Inside the container, your structure must have widths in percentage like this...
.col-1 {
width: 40%;
float: left;
}
.col-2 {
width: 60%;
float: left;
}
#media screen and (max-width: 320px) {
.col-1, .col-2 { width: 100%; }
}
In some simple interfaces, if you start to develop the project in this way, you will have great chances to have a fully responsive site using break points only to adjust the flow of objects.
i will provide mine because #muni s solution was a bit overkill for me
note: if you want to add custom definitions for several resolutions together, say something like this:
//mobile generally
#media screen and (max-width: 1199) {
.irns-desktop{
display: none;
}
.irns-mobile{
display: initial;
}
}
Be sure to add those definitions on top of the accurate definitions, so it cascades correctly (e.g. 'smartphone portrait' must win versus 'mobile generally')
//here all definitions to apply globally
//desktop
#media only screen
and (min-width : 1200) {
}
//tablet landscape
#media screen and (min-width: 1024px) and (max-width: 1600px) {
} // end media query
//tablet portrait
#media screen and (min-width: 768px) and (max-width: 1023px) {
}//end media definition
//smartphone landscape
#media screen and (min-width: 480px) and (max-width: 767px) {
}//end media query
//smartphone portrait
#media screen /*and (min-width: 320px)*/
and (max-width: 479px) {
}
//end media query
I'm trying to specifically target my desktop resolution using media query CSS which is 1366 x 768. Therefore i used this method.
#media (max-width: 1367px)
This desktop media query CSS actually works.
Unfortunately, it clashes with my media query CSS for my S4 and iPad which caused them not to be working. As shown below is my media query for my S4 and iPad
S4
#media only screen and (max-device-width: 440px)
iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
Apart from the method i tried above to perfect my CSS, is there any way i can specifically target the desktop resolution of mine which is 1366x768?
#media (max-width: 1367px) and (min-width: 1365px)
Your max-width rule includes everything less wide than 1376px, so you should set a minimum.
Don't forget, these measurements refer to the browser window, and not the actual screen, so they may not be correct for your purposes.
For example, my desktop is at 1600 x 1200.
At full screen, my Firefox window, as it would be referenced by css, is 1583px wide. Not 1600px.
Use more specific queries for your iPad and S4:
iPad
CSS
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
Smartphone (S4)
CSS
#media only screen
and (min-device-width : 320px)
and (max-device-width : 440px) {
/* Styles */
}
Start with the largest screen devices and update the rules as the resolution drops:
#media screen and (min-width: 1367px){ ... }
#media screen and (max-width: 1366px) and (min-width:1024px){ ... }
#media screen and (min-width: 1023px) and (max-width:768px){ ... }
and so on.
If you want to make use of cascading, keep in mind that the last rules will inherit the styles from the rules declared before them:
#media screen and (max-width:1023px){...}
#media screen and (max-width:768px){...} ->
In this case, the screens < 768px will inherit the rules from the previous declaration also.
I have the following rules:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px)
#media only screen and (min-width : 321px) /* Smartphones (landscape) */
#media only screen and (max-width : 320px) /* Smartphones (portrait) */
#media only screen and (min-width: 768px) /* tablets and desktops */
How to catch tablet portrait without affect the other rules?
There is no standard for "tablet portrait" in terms of device pixel width.
The #media orientation query is not very reliable at all and not widely supported. See here. You are best off just using min-width and max-width media queries and trying to get it to work at ALL possible widths than targeting a specific orientation. That's pretty much how responsive design is supposed to work anyway.
Portrait mode tablets will generally be between 768px and ~960px wide.
#media only screen and (min-width: 768px) and (orientation:portrait) and (min-height:1024px)
You should also beside specifying min-width and min-height specify max width and height combining it with orientation, then you really catch up mobiles without affecting others like tablets or pc, right now only with min-width for mobiles will also affect all devices accomplying that min-width
Pure CSS has helper classes for hiding stuff in tablets.
The media query it uses for tablets is as follows:
#media (min-width: 768px) and (max-width: 979px)
You could also try adding (orientation:portrait) to that.
(As seen in http://yui.yahooapis.com/pure/0.3.0/pure.css)
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.