Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Search
Home
Videos
Almanac
Gallery
Snippets
Forums
Newsletter
Jobs
Guides
If you think responsive's simple, I feel bad for you son. We got 99 viewports, but the iPhone's just one.
Josh Brewer, March 10, 2010
A major component of responsive design is creating the right experience for the right device. With a gazillion
different devices on the market, this can be a tall task. We've rounded up media queries that can be used to
target designs for many standard and popular devices that is certainly worth a read.
If you're looking for a comprehensive list of media queries, this repository is a good resource.
If you're reaction to this is: you should never base your breakpoints on devices!! You have a good point. Justin
Avery has a nice post on the possible pitfalls of using device-specific breakpoints. Choosing breakpoints based
on your design and not specific devices is a smart way to go. But sometimes you just need a little help getting
one particular situation under control.
iPhones
/* 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) {
/* 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) {
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
Galaxy Phones
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
HTC Phones
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
Nexus Phones
/* Portrait */
@media screen
and (device-width: 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
/* Landscape */
@media screen
and (device-width: 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
Tablets
iPads
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
Galaxy Tablets
/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait) {
/* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape) {
Nexus Tablets
/* Portrait */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
/* Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
Kindle Fire
/* Portrait */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
/* Portrait */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
Laptops
Media Queries for laptops are a bit of a juggernaut. Instead of targeting specific devices, try specifying a
general screen size range, then distinguishing between retina and non-retina screens.
Wearables
Yes, we're going there. Sure, these might not exactly qualify as "standard" devices quite yet, but they are fun
to look at.
Apple Watch
The Divi Theme Download the Ultimate WordPress Theme including our advanced Drag &
Drop builder
ads by BSA
Comments
1.
alpaproductions
Reply
2.
carlos
What are you using to switch between mobile width and full width on your current site?
Reply
Cody
He isnt using a different width just for mobile. He is using things such as
This just says that any time there is a screen size bigger than 500px, certain styles will be
applied, and when it is below that, it will apply different properties.
test
Anne
Hi, I am new to programming. I have a survey that I want to launch and it is possible that my
respondents will not have the same tablets. Can I combine all the scripts for the different
tablets?
3.
Tj
Just read your post on using CSS for alternate styles for websites based on screen resolution. Great
post.
Im wondering if I can pay you to make me a simple template for HTML emails (that look like text) that
looks good in mobile devices and desktop. Heres the specs
If the screen size is not mobile device then I need the text area to wrap at 350px.
If the screen size is mobile device then I want the text to wrap 100% across the screen (for either
landscape or non-landscape) with a max width of 350px (in case of something like landscape mode
iPad).
I need the text itself to be style font size +1 (so it looks slightly larger then the users normal email
messages).
What Im looking to avoid is using a 350px table to wrap the text and then having the iPhone shrink the
text down smaller then normal Requiring the user to take an extra step zooming in.
Also looking to avoid using end of line breaks at 350px and having those breaks end up mid screen on a
mobile device (looking horrible).
Should be pretty simple for someone into this stuff. Let me know if you can do it and how much.
Reply
Burke
Just FYI, this is impossible if you plan to support all email clients. Gmail strips out the head of
your message so media queries wont work. The best you can do is build a fluid layout and use
text-size-adjust.
Dom
Permalink to comment# October 7, 2013
Go to http://htmlemailboilerplate.com/
4.
Mark
Im just at the base of my learning curve on using alternate stylesheets for different devices. Following
your example elsewhere Ive sort of got it working. Im testing it on my HTC Desire Android and for it to
work on this phone Im having to set as follows:
Reply
Chris
have you used device width, initial scale=1 in your meta? mobile devices sometimes rescale
their viewings
5.
David Nemes
Reply
o
Jbcarey
Cer
This media queries snippet are just great, well organized and very clear.. Thanks a lot
6.
Ronny
Nexus S reports 533 Pixels in landscape mode. so none of the above snippets will work if the phone is
in landscape mode when you navigate to your site. my iPod on the other hand always reports 320px in
portrait, as well as in landscape mode. Same for iPhone 4. It always reports 320px.
Reply
7.
Omer Levi
Reply
8.
Jim
Thanks!
Reply
Arush Sehgal
You are correct, but Im not sure what the solution is here. Chris?
Cody
If you use min-width:321px, then max-width:500px, the min width property overrides it
because it applies all styles above 321px.
Mangat Singh
9.
shah
In regards to the media queries working on android browser. I Use Dreamweaver CS5.5. When I tested
there was no change .
When I tested in landscape view it takes the default web browser screen width it is not device screen
width.
Reply
Ryan Lowe
Same problem. Android browser adopts default stylesheet instead of mobile stylesheet. Testing
on Nexus S.
Ryan Lowe
I think Ive figured it out. When I use (max-device-width: 800px) it works. I guess @media is
seeing that my Nexus is 480800 and taking the higher number as the width.
10.
Mike
I cant get the W3 Validator to validate this. The error is: Bad value only screen and (-webkit-min-
device-pixel-ratio: 2) for attribute media on element link: Expected a letter at start of a media
feature part but saw instead.
Is there a way of using the value -webkit-min-device-pixel-ratio mentioned in this post in a way so
that its valid?
Reply
german
Mike:
I would add Your mobile-retina.css in Your main CSS file?
Example:
Marcy
Nobody really validates HTML anymore since there are so many evolving standards. If your site
works then why do you care?
Eric Sebasta
No. any css extension that is rendering engine specific does not validate. Anything starting in -
moz for Mozilla or -webkit for example while it works is not technically valid.
Laura
Permalink to comment# July 3, 2015
I this thread outdated please? I there more up to date guide for standard media queries??
I am sort of a newbie to media queries, so please excuse me if I seem out of touch with the
latest media queries code. However, I am just reading these comments for the first time and
they are over 3 years old. Does this site have an updated thread please??
11.
BirdYosh
(orientation : portrait) doesnt validate for CSS3. Are you ignoring that? Or do you have a
workaround?
Thank you.
Reply
12.
Robbiegod
i am writing right now is a page that will change the background image for each screen device because
the desktop version is going to have hi-res photos on it. So, I dont want to make mobile people
download these super large images. I want my CSS files to be seperate so i am writing my media
queries like this for example:
So a quick question. IF i visit a page that uses media queries does the browser download all of the style
sheets or just the one that has been targeted? In my case, the styles.css should always load and then
the other media queried stylesheets will load depending if they are true or not.
Reply
Nicholas
Paul
If you place all css in one file (including media queries), the device will download all assets
regardless of the devices dimensions, so while you might use display:none to completely
remove the element from the architecture of the website, its assets are still downloaded.
You are best to use a global style sheet, then target each break point setting with its own css
file, this way ONLY that file and its assets will be targeted.
If you load desktop images in your global style sheet, then target smaller devices with smaller
images, overriding the larger, you will be loading both the large and smaller image even
though the larger is not being displayed, it is being loaded, thereby slowing down the load time
of the site for mobile users.
Always best to use separate media query files to target the devices within the break point range
and always use min and max settings to target these devices, because if you use only min size
and overwrite by the next larger size (or smaller size) you are still loading all assets.
13.
Jeremy Mansfield
Is it possible to target the iphone4+ with a separate media query than other smart phones with the
same min/width size
However, by doing so, that also kills my iphone4+ styling where I *do* want the footer to display. The
problem is that the iphone4+ and the normal *smartphone* min/max dimensions are targeting the
same dimensions of 320 and 480 respectively and I am unable to get separate devices with same
width/height ratios to be targeted differently without overriding each other. Any online articles that
talk about this would be greatly appreciated!
Reply
Marcy
Did you try checking for the existence of a retina display (-webkit-min-device-pixel-ratio)?
Frank Patricci
LOL!
Kristin Schaeffer
Gorgeous site, Jeremy! And I really like how youve broken it up with media queries. I stumbled
on this post searching for the same problem you had getting everything to look the same
cross-phone-browsers. I think this thread may help me. Thanks for posting and keep up the
awesome work.
Paul
You can not target specific devices with CSS thats where adaptive design comes into play by
mixing together both javascript (or jquery) and css to target specific devices, set break points,
and anything else css can not do, then apply the styles associated by the Adaptive targeting.
o
Amit
Amit Nagar! And I really like how youve broken it up with media queries. I stumbled on this
post searching for the same problem you had getting everything to look the same cross-
phone-browsers. I think this thread may help me. Thanks for posting and keep up the awesome
work.
14.
Robbiegod
Does the trick that german wrote to Mike let you target the iPhone4? iPhone4 and iPhone4S are
the one with the retina display?
That should work right? Just put that in your main css file where you hide the footer but then add a
style in there to display it
Also, i checked out the website too, looks great. One question I have is when i collapse the browser i
notice that you always use the same set of images. Are you planning to keep it that way or will you
optimize it for mobile devices by making the background not as big.
Ive made my site so that it loads a different background image depending on what kind of device it is. I
dont want to download a 150kb-200kb background on my phone when i dont have too.
Reply
15.
Jeremy Mansfield
Robbie, thank you for your response. I do have the styles for the retina display only, in addition to
regular smartphones, and it does not seem to work on distinguishing between the two. If I eliminate
the footer for normal smartphones, it overrides the retina styles regardless. Seems to be all or nothing
so far.
Yes, thank you for your observation. I indeed plan on loading in smaller background images for the
mobile version. I just have not added in those media queries yet, as this is a responsive experiment for
me in progress.
Reply
Paul
16.
chris
My issue is the same as Marks. I am currently using Bootstrap and it seems like the layout changes
should be made when the page is vertical in the ipad, but the layout doesnt change unless I alter the
media queries from 768px to 769px. Im sure this isnt the way its supposed to be done
Reply
17.
ChrisHu
There are several reasons to use the viewport-width instead of the device-width.
Read more under:
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
Reply
Steven
You sir are a genius. Works like a charm! iphone4+ now show a different css and I can now
make my desktop browser 800px minimum width and not the minimum 1136px (iphone4+)
18.
Run Raksmey
Hi now i want to put |Home| page in my web. can you express to me.
Reply
19.
Rats
@Run Raksmey
Reply
20.
Hello,
I used about media queries in a recent project, when I enter into landscape mode from portrait mode
on iPad it appears scaled i.e. its already zoomed. I want it to show on original page zoom on both
portrait and landscape mode.
Reply
Peter Wooster
Ashley
Then:
<script type="text/javascript">
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0,
initial-scale=1.0';
document.body.addEventListener('gesturestart', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-
scale=1.6';
}, false);
}
}
</script>
sourabh
21.
Jonathan
Permalink to comment# April 5, 2012
Hi!
Am I really the only one with issues using media queries and Desktop Safari?!
Reply
Tony Shaw
You are not the only one with safari issues. I am having the same issues with safari picking up
@media css as well in ANY resolution. the problem is i did a @media body {overflow:hidden}
and safari will not scroll now lol
Paul
you need to add a max-width break point as well the style you set in min-width starts at the
size and goes up and is inherited.
Eric Sebasta
You said match every screen device with over 320 pixels. That is every device except very old
phones, and you asked it to look and device-width, not width, so it does not care about the size
of your browser window at all only the devices width.
22.
Robbiegod
just a stab in the dark to help you out, but you are saying the minimum width needs to be 321px, which
your safari is at least 321px wide, so of course its going trigger on there.
Look at the code example above, you see for smartphones he uses (max-width:320px;).
Reply
Jonathan
/* Smartphones (landscape) */
@media only screen
and (min-width : 321px) {
/* Styles */
}
Ri
KevinM1
What would be the heights associated with the widths? Im weary about above-the-fold problems.
Reply
24.
robbiegod
You would have to research each device you want to target to find out the heights or find the phone
with the lowest resolution to use as a baseline.
Honestly, you should just structure your page so all important vital things are at the top and less vital
things below that.
Amd make it so your 2ndary things are partly visible so they know tp scroll, but I think it is mostly
implied.
Reply
Marcy
The page fold is a mythpeople know how to scroll. Especially on mobile web.
25.
Vic Dinovici
Im pretty new to this media queries thing so I may be missing something but I try to implement
lessframework on a page and something weird is happening on my iPhone4:
when is in portrait it is resizing the page just fine but when I rotate to landscape the page goes out of
boundaries
if I refresh the page while in landscape the page is looking just fine
Thanks,
Vic
Reply
Laurens
See: http://stackoverflow.com/questions/5434656/ipad-layout-scales-up-when-rotating-from-
portrait-to-landcape
26.
Jared Booye
Hi Chris,
I am a GUI designer. When designing for a mobile site iPhone retina display I traditionally use a
resolution of 640960. When designing for mobile or iPad in PS should I compensate for the hi res
display or just design at the 320px (72 DPI)/768px (72 DPI)?
Jared
Reply
Adriano
Hi Jared,
I would work matching one of the highest resolution supported today like the iPad mini retina
that is:
27.
Marc
Hey there!
Thanks for the useful info. Im a newbie & hungry for good advice & coming across great content &
design inspires me even more.
I love your input boxes with the images in them! Can you tell me how or where i could find out how to
use them?
Thanks, marc
Reply
28.
@kerns
I really love the idea of a boilerplate snippet for queries, but the portrait and landscape queries for
smartphones (more accurately, for iPhones) appear broken in my tests.
Im also curious why we wouldnt want to leverage device orientation for this task also seems slightly
more platform agnostic. Detecting portrait mode would then look something like
@media only screen
and (max-device-width: 320px)
and (orientation: portrait) {
Reply
29.
Steve Roberts
I am having problems understanding your approach to this. I have been working with a framework
lately and working on a responsive grid system. Maybe I am understanding this differently but I set my
responsive parts in a separate stylesheet to another stylesheet I call global or base where in this
goes the main grid system. In this part of your script
/* Large screens */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
you have 1824px which yes is understandable, very large screens, larger then my imac monitor so
therefore the grid system can expand. But then you have 1224px, ok this is larger then the resolution
of my macbook but 1200px at least is my imac size and to me the standard size of any screen round a
bout.
RESPONSIVE STYLESHEET
/* Desktops and laptops */
@media only screen
and (min-width : 1224px) {
/* Styles */
#container {width:1170px}
}
GLOBAL STYLESHEET
#container {width:980px}
Now I feel in my (round a bout) 1200px size monitor, these two sizes are gonna class. Why not delete
(min-width : 1224px) and set it at a much larger pixel rate.
I hope this makes sense. Now heres how ive done it which to me makes more sense. Now between
768px and 1824px I can then create the grid system as normal to whatever size i feel and when it goes
below 768px or above 1824px, it changes. But their is no mixing.
/* iPhone 4 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio:
1.5) {}
@media print {}
The only other idea I have come up with is that your not creating the css anywhere else and the 1224px
is what it is but what if a grid is 960 or 980px which is typical.
Also you have a and (min-device-width : 768px) and (max-device-width : 1024px). I know its a device-
width, will that not effect it on a desktop or laptop computer?
Sorry about the blunt questions, but im just trying to understand it and I ask a lot of questions. :)
Reply
Paul
30.
Jeff H
Is there a way to distinguish between an iPhone 4 and an iPad 3? Just using the pixel-ratio doesnt
seem to work
Thansk,
JH
Reply
Mike
/**********
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 */
}
/**********
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 */
}
31.
Gazu
Hello
how can I make a special styles for the Iphone4 retina in landscape position?
I can apply the portrait.. but when turn my iphone.. this lost the styles
this is right?
Reply
32.
Vic Dinovici
Reply
Theo
33.
Gazu
Reply
34.
Joseph Carr
When I test in an emulator the devices highlighted the site looks fine, but still for some devices it
seems not to work.
Any ideas?
http://www.zappybaby.be/nl
http://forum.zappybaby.be
Reply
35.
Vishwa
i cant use media query in bigcommerce template, did not work, shal i need any java script for it? pls
help
Reply
36.
Vishwa
Reply
37.
sonali
Hi,
we are planning a tablet version of our existing website with entirely different content. Now, just want
to know the css media query for the same catering all the tablets i.e. android, ipads, noble nook,kindle
etc.
Reply
38.
Marc
Permalink to comment# June 26, 2012
When I switch from portrait to landscape on my iphone the site doesnt align properly. It overflows. I
have a 480px style set so what else am I doing wrong? Can anybody help me?
Reply
ToMarc
You should use percent based values inside of the stylesheet, and set a max and min width for
the link to the stylesheets. Everything should be fluid except of the breakpoints, but the
viewport above 900/960px can have a fixed value.
Gruber
Maybe i know whats your issue, on iPhone when you switch from portrait to landscape there is
a bug screwing user zoom, therefore it overflows (if i understand your problem correctly). If
thats the case, you have to zoom out to manually fix it isnt it?
Theres a nifty script here http://github.com/scottjehl/iOS-Orientationchange-Fix, that can fix it
for the user automatically, and it works pretty well!
39.
Gruber
hei there ive been trying to do something to say sort of for anything with device-pixel-ratio>1 use
this .
Ive tried something with the not operator :
@media not screen and (max-device-pixel-ratio: 1) { stuff }
Is it worth in your opinion?
Btw i was wondering if vendor prefixes are still needed for this or just the vanilla
Reply
o
Gruber
Damir Abdic
40.
canis
All this pixel-fiddling does not make sense. With iPad 4 it is clear: you have to ask for the physical size
and not for the pixel-resolution. even on a 640-pixel wide iPad a two column design of a web page
does not make sense.
Reply
41.
canis
I now realized my responsive web page. See http://mm.ymir.de . It not only adapts to small devices,
but also to small browser windows. So just narrow the width of your browser and look how the page
changes. Also the pictures are responsive: When loading the page they are loaded according to your
window size.
Reply
Joseph Carr
http://responsive.is/www.bostonglobe.com
42.
Martin Dub
Have you tested which size (min-width/max-width) can target the new MacBooks Retina display?
Im not sure if this new high definition laptop screen resolution is conflicting with the above media
query for large screens (min-width : 1824px).
Reply
43.
Niall
Hey peops, just to let you know that if youre using Less with the Less.app on Mac, it doesnt accept the
original device-pixel-ratio of 1.5 or indeed the opera equivalent of 3/2.
All device-pixel-ratios need to be 2 only.
Just thought it might help someone out there!
Peas and korn.
Plus, Chris what is your view on the HTML5 form validation strictness of the URL input type. I really
have to include my http:// really? What is up with that
Reply
44.
JCaveman
Permalink to comment# August 7, 2012
Reply
45.
Will Egan
I love you!
Reply
46.
Tom Copeland
Hey Chris, great info. Any ideas on how to check using PHP for a particular screen size, in this case for
an iPhone, or max-screen-size: 320px?
Reply
47.
Vishwa
I used media query it works in browser when i re-sized my browser, but it not work with mobile device,
ipad, android , android mobile screen size width 320px, but it takes @media only screen and (min-
width:768px) and (max-width:1024px) this query , what i do?
Reply
48.
canis
Permalink to comment# August 23, 2012
And for selection of the design think about using the width and height in inch or cm instead of pixels.
See my website
Reply
49.
canis
Reply
50.
swati
Reply
51.
Vishwa
Reply
52.
f1ss1on
Permalink to comment# August 24, 2012
Hey guys, when it comes to responsive there are many ways to accomplish your goals. Probably one of
the most easy and common is the way Chris describes here.
One that I have learned is to use increase max widths to target general smartphone devices such as the
Samsung Galaxy 3 and others.
Reply
53.
f1ss1on
Umm, what Marcy? Nobody validates HTML anymore? Looks like you may need to work in another
field.
Google loves valid HTML, and so does its crawlers. If you dont have valid HTML, you dont have a site
worthy of indexing. This is one thing that makes HTML 5 so great. It is semantic. Just because it works
does not mean its working for you or your clients.
Google SEO Test Google Prefers W3C Valid HTML & CSS?
Reply
54.
Marcy
Reply
55.
Dan
@f1ss1on: Youre parsing words there. Marcy isnt saying dude just write shitty broken HTML, its
cool! Shes saying you shouldnt worry too much about validators because they dont take into account
the complexity of our rapidly evolving ecosystem. Validators often puke on code which is perfectly fine.
Reply
56.
canis
f1ss1on: But what will your code do on a Samsung Galaxy 4 and an iPhone 5? Why do you ask for pixel
size instead of physical sizes? It will only save your employment changing the same code again and
again to add each new device.
<script type="text/javascript">
// set size for image processing on server
function setSize() {
document.cookie='resolution='+ window.innerWidth +'; path=/';
}
</script>
<meta name="viewport"
content="width=device-width,
nitial-scale=1"
/>
<link rel="stylesheet"
type="text/css"
href="css/small.css"
media="screen and (max-width: 14cm)"
/>
<link rel="stylesheet"
type="text/css"
href="css/medium.css"
media="screen and (min-width: 14cm)
and (max-width: 20cm)"
/>
<link rel="stylesheet"
type="text/css"
href="css/large.css"
media="screen and (min-width: 20cm)"
/>
<body onLoad="setSize();" onResize="setSize();">
Reply
57.
JCaveman
Marcy also said that the page fold is a myth. Which is another case in which she is wrong. It has
nothing to do with whether people know to scroll or not- its the notion of captivating your audience
quickly. Putting the right content above the fold entices them to scroll in the first place.
Reply
Dan
What I dont understand is your need to make insulting personal comments like this. Debating
ideas is awesome insulting somebody and questioning their right to practice a discipline is
immature and unprofessional.
Marcy
How about making this more about media queries & sharing knowledge and less about cutting
people down? Everyone will benefit from more code and less negativity.
o
Paul
Page fold is not a digital term its from the days when newspapers (remember them?) were
sold on the corner and the publisher used the most exciting stories above the fold of the paper
to sell them. Print folks evolved into digital and carried terms that were not interchangeable
Browsers scroll, so there is no such thing as above or below the fold Ive seen many websites
that only scroll left/right, so where is the fold on those? People interact with websites, thats
why we build them, so why should everything be above the fold? A waste of design ethics
when one does that.
58.
JCaveman
It is my opinion that misinformation passed around by people in my industry who claim to be experts is
one of its biggest downsides. Especially when they present their opinions as fact, like Marcy did. Junior
developers are led astray every day by comments from people like this.
Your responses are over dramatic. I did not personally attack Marcy; she tried to use her agencys
practices to qualify a misguided statement. I responded to it.
Reply
Dan
Again, youre stating your opinion as fact, and the opinion of others as misinformation.
If you think Im being dramatic by pointing that out, I have nothing more to add.
59.
Jcaveman
Permalink to comment# August 25, 2012
Marcy, I apologize for insulting you. Ill word my comments differently in the future.
Reply
60.
Tim
Hi all, becareful with Media Queries! They are not pixel accurate.
Some times they are off only 20 pixels but other time they are off up to 150 pixels However, even few
pixels is very bad when trying to target a certain mobile phone screen.
Reply
61.
vhinmanansala
is not working when i test the site im working using ipadpeek. but works when i removed the device-
is there any difference between them? thanks, this is my first time developing responsive website so
im a little confused. please guide me.
Reply
62.
MIhail Yakimenko
63.
Surya Osborne
Vhinmanansala, I am just reading Ethan Marcottes Responsive Web Design and he mentions that min-
width and min-device -width are two different things. I guess the essence is that a screen is not
considered a device.
Reply
64.
Lil Fab
it can be work correctly.. im so confuse bout what is happen with that.. please explain to me..
Reply
65.
Lil Fab
it can be work correctly.. im so confuse bout what is happen with that.. please explain to me..
Reply
Chathura Wijekoon
It depends on your approach to code. Actually it really works fine without the term and
(orientation : portrait) because in most devices it is the default view. But in some cases (there
may be), when the device is kept horizontally, the CSS code should be changed. It depends on
your design + the way of coding. Mostly if you use Percentage values for specifying width,
margin as well as padding, the removed term is not needed. But if you mention the values in
PX (Pixels), you have to use both (orientation : portrait) as well as (orientation :
landscape) separately.
Thanks!
66.
Digamber
Reply
67.
Pamela
I have been using it like this to make it web & mobile responsive.
Reply
68.
isaac
What if I want the same Media Query to target the iPad AND the desktop (max-width: 768), without
duplicating the code? How to do that?
Reply
Kusumakar Pant
69.
damu
You yourself seems to be doing other way round. from larger screen to smaller one. not mobile first.
Reply
70.
spike
I always use this post as a reference, but what about the new 7-inch devices?
Reply
71.
Webbyra
I also use this as a reference but as spike said how about the new 7 Nexus and the iPad Mini. What is
the best with for this?
Reply
72.
Colin
If anyone here needs a way to quickly generate valid custom media queries or need to look up other
device specific presets, I wrote a free media query tool called Media Query Builder which you can find
here -> Media Query Builder
Reply
73.
Ben
You seem to be missing the ability to target both ipad and iphones:
Reply
74.
Ravi Suryawanshi
This is information is helpful, but is there any way to write minimum media queries and work on all size
devices.
Reply
75.
tim
I just found something strange that might save people a lot of wasted time with media queries on
Android devices:
Im developing a mobile site and for some reason, a 540960 phone running Android Jellybean would
only pick up the 360-459px wide stylesheet. When I commented out this stylesheet from the header,
the phone totally ignored the others, even the one that specifically targets its resolution.
After a ton of research, it turns out that the default browser zoom setting does not actually zoom in
the browser per se, but rather ignores its physical resolution, and pretends to have a smaller one.
After some experiments:
It would appear there is no way to force the users browser to load the proper size stylesheet if their
settings are different. Just thought Id share this, its wasted a lot of my time, and finally I can move on
:) Hope it helps
Reply
Tim
Hi again, heres a few more things Ive since learnt about the subtleties of Android devices:
There are several attributes that can be applied the the tag that alter the way they handle
zoom. One of these is: content="target-densitydpi=device-dpi"
What this does is prevents the device from zooming on the page when it loads. This solved an
irritating zoomed-on-load issue I suddenly had with the iPhone 4s. Users can still scale (if youve
allowed it), it merely targets the devices actual DPI rating, instead of relying on the often
unpredictable automatic zoom. My meta tag now looks like this:
This allows for the layout to adjust completely based on any display. The only hitch is the OS.
For some reason, I cant for the life of me get it to load on a HTC 7 Trophy windows phone
without being zoomed in. Any thoughts? This is the only OS that seems to cause problems now.
Even Blackberries work fine.
In another tweak, Ive updated my media queries in an attempt to ignore most tablets while
still catering for ludicrously high-DPI phones, such as the HTC Droid DNA (19201080, wow). To
do this, Ive simply added another media query with a new condition below the main one:
‹link rel="stylesheet" type="text/css" media="only screen and (min-device-
width:540px) and (max-device-width:960px)" href="mob_vhigh.css"/›
‹link rel="stylesheet" type="text/css" media="only screen and (min-device-
width:961px) and (min-webkit-device-pixel-ratio:2) and (min-device-pixel-ratio:2)"
href="mob_vhigh.css"/›
This way, the phones load like normal, but any display larger than 960px must have a very high
DPI display to access the styles, so hopefully this will be phones only. Its not perfect, as I
havent had a chance to try it on the Retina iPad (DPI anyone?), but it is designed to quickly
provide a clear divide.
Rather than try and guess how high-res the next generation of phones will be, and have the site
inevitably break on some new device in the future, I thought it made more sense to simply
allow no limit and instead exclude the devices I didnt want by using media queries. Having your
mobile layout designed for small screens appear on a iPad makes you feel like a spoon-fed kid,
as the buttons are now big enough to smash with your fists instead of point with a finger.
76.
Mike
I found that some of the media queries here a bit haphazard. For example, the smartphone landscape
query is min-width:321px my desktop browser when larger then 321px wide will run the stylesheet
intended for smartphones. Seen how iOS+Safari doesnt consider itself a handheld device,
using @media handheld and (... does not work, so I found that some were clashing with others were
they shouldnt have been. After many frustrating hours I went looking and found this question on Stack
Overflow, Media query ipad vs iphone4
The media queries are being used to specifically target a device width, pixel density(css ratio) and the
orientation. Leaving very little for one device to use another stylesheet not intended for it. Although
this maybe slightly more to write out, you get the consistency across all devices and I have never had
any headaches using this method since.
Reply
77.
Gustavo C
I am pretty new with media queries. I have a website I am creating a mobile version for. When I check
the site in iphone 4s portrait, 320px wouldnt cover 100% the width. I need to push it to 375px to make
it cover the width of portrait view. Any suggestions?
I am using: inside code
and html { -webkit-text-size-adjust: none; } inside css
the media querie I am using is:
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
Reply
78.
viv
I have tried the same media queries for wordpress test site loaded on localhost. I used online
responsive design tool http://ipadpeek.com/ . This tool fails to catch landscape and portrait mode
queries. But while I tested localhosted wordpress site directly by changing screen resolution of my pc
with windows 7 in portrait and landscape its works.
Reply
79.
Carlos
I know article is from a while back, but has anyone had an issue with max-device-width and having
rendering issue.
My impression was that the max-device-width only rendered on phones, tablets, and mobile devices,
not on desktop browsers.
This happens when the browser is set and the initial load of the css file with the @Media query loads.
So if I have
@media screen and (max-width:500px), screen and (max-device-width: 1280px){/* My mobile styles
here */}
the desktop browser or screen resolution of the desktop is set at 1280px, it will actually render the
1280px styles mobile styles and not the desktop styles. Did browser makers roll max-device-width
into their browser builds? Any pointers or insite would be great.
Thanks.
Reply
80.
Mittal
Hi!
You have used proportion for iPhone 4, but what proportion will work for iPhone 5?
Reply
81.
Chris Dill
I have built my first truely responsive site, with a lot of help from CSS Tricks. I built it in SCSS with lots
of media queries using breakpoints as outlined by Chris C. My question is- I have only user min-width
and max-width (No min-device-width or max-device-width). Is this incorrect? As far as I can tell my site
is working fine across all devices, though testing UserAgents is a pain. Most of my testing comes from
resizing the browser in Chrome, IE and FF, and then using Chrome Dev Tools to test on Galaxy Nexus
and also on my wifes iPhone. Here is an example of my breakpoints.
@mixin breakpoint($point) {
@if $point == 1600 {
Reply
Martin
I am entirely new in this topic. But this seems very interesting. Could you drop an example what
the @content does mean and/or where and what shall be stated in it?
Thanks a lot.
Chris Dill
Martin- Sure! With the above code, I can use SCSS and mixins to easily make my site mobile
responsive. Rather than creating a huge block of CSS at the bottom of my stylesheets and
putting all my mobile CSS there, I add in my mobile CSS as I design my normal CSS. I then use a
gem which moves everything to the end for production. Moving forward with the above
breakpoints, my CSS might like like this:
As you can see, when SCSS compiles my style sheets, it will yield the following CSS:
o
Chris Dill
My above illustrations was simple but when you use this for an entire site it becomes super
powerful. When I need to go back and edit the screen width of one div only on mobile devices
at 640px, I simply go to that class in my CSS and make changes- I dont need to scroll through a
page of mobile CSS to make changes.
As Chris Coyer said the above way(using mixins and SCSS) is the way your brain wants to
connect the dots, so why organize things differently. Since I have started to do this, I can just
code mobile as I go. I can put together a sites CSS and responsive all at once, rather than two
separate items.
Anas Abudayah
82.
Christian
Hi Chris. Great article. I often refer back to it. I was just thinking that a lot has evolved and come about
with mobiles and tablets since you wrote this article back in October 2010. Smaller tablets have been
released and some mobile resolutions have gotten bigger. Has this blurred the lines somewhat with
your advised media queries for different devices? Or would you say its largely unchanged?
Reply
83.
Chris Hunt
Ive been doing some testing on this and using a sony xperia s it seems to think that device width
changes with orientation (720px then 1280px).
This would lend one to use something like this to target Android:
@media only screen
and (min-device-width : 720px)
and (max-device-width : 1280px)
The problem with this is that it overlaps with the iPad and using min-device-pixel-ratio is not enough to
separate them when you get to the iPad 3 as they both have that as 2
Does anyone know how to make android behave and yet not get my mobile site to appear on the ipad.
Thanks
Chris
Reply
84.
Martin Dub
Because browser vendors dont support the NOT selector from W3C I had to rely on JavaScript /
jQuery to isolate the CSS that I didnt want to show on iOS and Android device.
<script type="text/javascript">
//detect if browser supports touch
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device){
$('body').addClass('touchDevice');
}else{
$('body').addClass('notTouch');
};
</script>
Reply
85.
Sandeep
Reply
86.
Martin Dub
This detailed browser compatibility table of the viewport (and some related items) from Peter-Paul
Koch will help anyone interested in this subject in separating the facts from the utopias.
http://www.quirksmode.org/mobile/tableViewport.html
Reply
87.
Gajen
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Reply
88.
Chris Hawkes
I have a website Noobpost Im trying to figure out how many media queries max-width sizes I should
use, right now I have four, but it doesnt seem to work well with landscape views. It also appears I need
to position everything in a percentage to make it more fluid.
Reply
89.
Al
Reply
90.
Chris Dill
You could always just keep the content centered (or left aligned) on the page at a normal width, say
960 or 1024px which would allow it to be readable. To fill up the extra space on the sides you could use
a gradient, clever shadows, or some images to fill up the blank space. My site maxes out at 960px so
it looks the same on 1600 wide monitors, and 1900 wide monitors and beyond. A word of advice-
when designing for large screen, testing or actually designing for a large screen is really helpful- it is
hard to visualize a large screen when working on a 13 laptop.
Reply
91.
Biju Subhash
92.
Conor
Is there a correct meta tag to go with this? Im trying to target the iPhone4 and below screen widths
(and not the iPad2 and above screen widths). But this isnt even working for iPhone4s..
Reply
93.
This is an informative article however i would approach responsive design much the same as we
currently do for fully fluid layouts. My personal approach is semi fluid in nature with responsive design
only to enhance the content.
If for example we apply a fixed width on the container (div as the most semantic selector) Then we can
simply target that by simply applying a max width, minimum width and auto for backwards
compatibility. Of course will work for semi modern browsers this is the best option in my opinion. We
can scale this up or down based upon a percentage and change the width constrictions and there we
have a complete fluid and responsive design.
Of course other elements needs to be specifically styled, rearranged or sometimes hidden (i would not
recommend) by using media queries.
Reply
94.
chris
Hi,
I am working on a website to make it responsive.
1) Mobile phones including iphone series using a css file (includes portrait and landscape layouts with
@media),
2) Tablets & ipads using a css file (includes portraits and landscape layouts with @media),
3) and desktop version css (which for large, medium and small break points usig @media spearated.)
Is there a way to accomplish the complete workaround some thing like this
link rel="stylesheet" media="only screen and (device-width: 768px) and (device-height: 1024px) and
(-webkit-min-device-pixel-ratio: 1)" href="ipad.css" for ipads & tablets
I know I might be wrong here, as I am very new to this.. Please help me.
Thanks in advance
Chris
Reply
95.
Tom
Reply
96.
Rafiul Alom
Whats the best solution for IE8 or bellow browser support for media query?
Reply
o
Preston McCauley
Your text to link here is a polyfill for using media queries with IE 8 below.
97.
Xavier
Hello, what about new smartphone with high resolution such as the sony xperia Z for exemple.
Its resolution is 1920 1080, this will be a problem isnt it ?
Reply
Mohamed
98.
aneeskodappana
Reply
John
Permalink to comment# August 23, 2013
Thanks for this guide. I am trying to figure out why you specified orientation for ipad, but not
for smartphone..
Instead of:
It seems you omitted the orientation from these smartphone media queries, but specified them
for ipad? Is the orientation needed for phones or only tablets?
Thanks,
John
99.
Alex Goretoy
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
/* iPhone 4 ----------- */
$media-iphone-4: "only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-
pixel-ratio : 1.5)";
Reply
100.
Damir
Great article man, yes its been 3 years since the article was created but I still find it useful :)
Reply
101.
Matthew Stapleford
I have used these media queries a few times now so very thankful that this great resource is available.
Thought I would just share that it helped me to resolve a few style issues to swap the portrait and
landscape smartphone media queries around so that for the smartphone media queries it went:
Smartphones (portrait and landscape).
Smartphones (portrait).
Smartphones (landscape).
This helped to stop some of the styles being over written on some phones.
ipad and everything else seemed to work just fine as they are.
Reply
Matthew Stapleford
ok, just ignore my comment above about swapping the media queries around. I have just
noticed a missing } which was causing the styles that followed the missing } not to work. Doh!
Should have seen that one!
102.
Griffen Fargo
Thanks again CSS-Tricks, you guys continue to produce quality workI I use on a daily basis!
Reply
103.
Amani Icy
hi , iI have just tried this snippet some how it is not working for me. It doesnt set the right CSS based
on device or when i resize the screen in my browser. So below is what works s fine for me. It allows me
to apply css on both Phones and desktop with small / resized screen size
`@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {}//for
mobile phones
@media only screen and (max-width: 768px), only screen and (max-device-width:768px) {}//for tablet
with medium screen
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {}//for tablet
with large screen`
Reply
104.
Al Lemieux
Reply
105.
Chris Dill
Al,
I know this is perhaps not the answer you were looking for, but why do you need device-width? Do you
have a specific reason for using it? I normally build my sites using Min/Max width which I code in using
SASS breakpoints, and when I go to production I leave them be. The only way in which I could see
myself using a device-width tag would be for some sort of mobile app based on HTML.
With Min/Max width, you are also allowing for new devices as they emerge, no matter what the device
dimensions are. I like to develop for all sizes- meaning that as I use breakpoints I want my sites to look
99-100% at every width, even if it is in between normal device widths. With Min/Max width you can
test this by dragging your browser around.
In other words- unless you can name a reason to use device width, stick to Min/Max width.
Reply
106.
ramesh
Permalink to comment# December 10, 2013
1
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {}
2.
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
=> I have work this condition proper but when i rotate device from landscape to portrait or portrait to
landscap at that time condition not taken without page refresh
Reply
Ri
107.
Frank
Specific style for specific query why its not working without important
for example
Reply
108.
Patrick Chester
I havent tried this code yet but does anyone know if this works?
Reply
109.
Lee Design
Hi Patrick and Frank given the evolving nature of mobile platforms, fixed widths are less flexible than
percentage settings- so describing a set dimension now may well compromise A N Other platform in
the future. And make more work for you.
Good Luck!
Reply
110.
Nagarajan
Hi All,
Reply
111.
john
Reply
112.
Daniel
While previously Ive tweaked ready-made solutions for responsive web apps, 2013/2014 are for me,
professionally, the years of building responsive markup from the ground up for SharePoint 2010 and
2013. Ive used these @media queries with great results. They work on nearly ANY mobile device,
provided the devices viewport resolution fits these parameters. Using these queries you can
hide/display content containers (divs and whatnot) to create distinctive experiences for your users,
based upon the device they use to access your web app.
Im VERY impressed with this sites responsive design, not just how the content changes widths but the
attention you guys have paid to EVERY piece of the UI, especially the nav and the banner ad. Really
impressive, CSS-Tricks, Im subscribing and look forward to gleaning a lot. Great job.
Reply
113.
Thiyagarajan Harish
This tutorial is really good but why doesnt this media queries working in ie9 is there any special code 2
make it happen
Reply
Paul
Permalink to comment# May 6, 2014
114.
yennefer
So what about new bigger smartphones, do we still use max-width: 480px? But their resolution is much
bigger now, with iphone 4S having 960px and latest Nexus much higher does it mean on those
devizes users will see desktop version of the site? Im a bit confused
Reply
115.
Daniel Kemper
Reply
116.
Paul
If you use min-device-width or max-device-width, make sure you are also defining min-width and max-
width (same goes if youre targeting height, and yes people targeting heights does work).
Also at the very minimum use this in your head section but preferably use this
If you use only @media only screen and (min-width: NNNpx) and no max, expect troubles but they are
solvable try to break your code to what is the architecture (dimensions and sizes) and what is design
(colors and imagery) and have separate files Architecture files should have min/max defining start
and stop points, while min- can carry design element transformations upward (or downward
depending on if you start mobile first or not).
Reply
117.
Paul
If you use min-device-width or max-device-width, make sure you are also defining min-width and max-
width (same goes if youre targeting height, and yes people targeting heights does work).
Also at the very minimum use this in your head section but preferably use this
If you use only @media only screen and (min-width: NNNpx) and no max, expect troubles but they are
solvable try to break your code to what is the architecture (dimensions and sizes) and what is design
(colors and imagery) and have separate files Architecture files should have min/max defining start
and stop points, while min- can carry design element transformations upward (or downward
depending on if you start mobile first or not).
Reply
118.
Paul
Also at the very minimum use this in your head section <meta name=viewport
content=width=device-width, initial-scale=1.0> but preferably use this <meta name=viewport
content=width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, target-
densitydpi=device-dpi>
Reply
119.
sam
Reply
Zeshan Ahmed
Yes, and add styles of course. Just in case you dont know, you also need to add a View Port
meta tag in your of html file.
120.
ALIREZA
your website is very helpful. when i have any problem in web designing in see your ideas and they are
almost perfect.
thank you man.
thanks GOD because we have someone like YOU.
Reply
121.
Anthony
hello, my website isnt responsive. i am using joomla 3.3.0, how can i make this responsive, which when
open in a mobile device it will fit on its screen size and not changing or shuffling any images, it should
be look like exactly as it is in the desktop browser. can anyone help me?
Reply
122.
Anhony
Permalink to comment# May 19, 2014
Ive found it, I just remove the width=device-width in the meta tag at index.php and viola! my website
fits on the screen without any @media tags!
Reply
123.
Just what I was looking for, many thanks! Developing a funky calendar that just wont work on a
mobile Well, not yet anyway! ;)
Reply
Trevor Franks
Funky calendar for a mobile just add This stops the keyboard from opening
124.
Hany Sobhy
Hello,
Does iPads (portrait) query target only portrait?
or it should be :
Reply
125.
Jon
I built this into a quick site so thought id share it. Very basic, changes colour and content when the
screen is re-sized. http://demo.slickdesign.com.au/responsive-template/
Reply
126.
Gerard
Let me share my @media queries. Im using this scheme on my own WordPress theme and at the
moment its working very well. What do you think of it?
Its important to remember that max-width and min-width include the pixel referenced. For example,
min-width: 768px includes the 768px position, the same occurs with max-width: 768px. Its used twice
and we have less control. On these cases, its better to add one pixel more to the min-width; for
example, min-width: 769px.
Scheme:
= 769, <= 1024
= 481, <= 768
= 321, <= 480
<= 320
Reply
Adam
Pali Madra
Bryn
Yes this is critical if you are showing and hiding certain elements using css. I would not use -
device- or when you resize the browser it will look horrible. Just an FYI. I never use -device-, I
dont see the point because all devices will fall into the above @media queries that Gerard
posted. Keep these on file and thanks for sharing.
Laura
127.
Gunnar
Hi,
Im wondering why so many different pixel-sets of different media-querys exists to somehow cover
every potential screen resolution. What will happen if in maybe one year a complete different
resolution will be required because of new hardware? Isnt there a way to be more flexible and to work
with proportions of a screen based on the actual font-size e.g. with the attribute em ?
Reply
128.
Michele
Im using @media only screen and (max-width: 768px) etc. in my css file, but I want images in my main
html pages to show or not show depending on the screen size. How do I control that? Have you done
that before? I just want to pop in a different image if screen size is smaller than the 1024px.
Reply
129.
vir s
hi guys,
here you can use the following for devices:
@media query only screen and (max-device-width: 480px){
/*your styles for a 480px device*/
}
Reply
130.
Muhammad Kashif
Hi
my problem is that when i use @media (max-width: 320px) then page works fine . but below that .
when i write code for @media (max-width: 800px) then 320 does not work just @media (max-width:
800px) works fine ,,,,in short both doesnot work at the same time
anyone can answer ?
will wait :)
Reply
131.
Mar
Reply
132.
tozman
Muhammad,
Reply
133.
Nitesh
can you please tell the media query for Ipad mini. The media query for IPad is not working for IPad
mini. Please help me for this
Reply
Nitesh
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-
pixel-ratio: 1){
134.
manoj kushwah
You are right but my problem is a responsive media in overview for tablet and iPhone in use your
media query not smartness.
Reply
135.
adnan
Hi,
I am trying many media query but my website not convert in responsive style in Samsung Galaxy S3, on
all devices site open in responsive style.
any one can tell me right method and right media query for Samsung Galaxy S3.
Reply
http://nmsdvid.com/snippets/#
136.
Kevin Jackson
How do responsive design code writers address phones that have more pixels wide than the old
phones did. For instance, my cell phone (ZTE Warp Sync) has dimenions of 1280 x 720 pixels (not the
tiny 340px Ive been seeing in tutorials and sample codes) with a pixel density of 293.72. 1280
(landscape) nor 720 (portrait) is considered phone size any of the media queries Ive been seeing.
Some of this code would render a site I make like a desktop, rather than a phone unless Im missing
something.
Reply
137.
laminlay
Reply
138.
laminlay
Permalink to comment# October 28, 2014
hi
Reply
139.
Michael
Hello folks.
I want to target a certain device using a specific browser.
Now how do I accomplish that? do I nest the media queries?
example:
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width : //px) and (max-width : //px)
Reply
140.
Antonio
So, its seem to me that Ive been the whole time setting the breakpoint false:
@media(max-width:768px)
@media(min-width:768px)
I thought that was the propper way. I have had a lot of problems with devices 768px wide. Now I know
why :|
Reply
141.
John Gerome
Keep It Simple
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
Reply
Glen Pavelich
142.
Patrick
Hi,
i have a little question. I wrote this in my HTML-Code:
This is only an example. My problem is that when i write an other alternative stylesheet with the same
code like i wrote in this comment, the stylesheets dont overwrite the others when I change the
browser-width oder -height. Is this the mistake: (min-width: 0px, max-width: 800px) ?
Must i write the code like this: (min-width: 0px) and (max-width: 800px) ?
Hope my english is good enough to understand me.
I would be lucky about an answer.
Thank you
Reply
143.
surender sharma
HI i am using (landscape and portrait) for screen size (1024768). But again when i am using this
method for screen size (736414) then its not workign. Any Suggestion ? and also plz tell me that is
this method can see in desktop browser?
Reply
144.
cn arabia
Reply
145.
Shahbaz Akhtar
Reply
146.
David Englund
I am using the Responsive Theme. What if I want to hide my sub-menu items on the desktop,
but show them on the mobile? I use the Responsive Menu plugin for mobile, which provides a nice
slider expand/collapse look for menus there. But, on the desktop I dont want sub-menus to show. The
main menu items (e.g., About) will take you to that section/page of the website, where a sidebar
navigation will then be used from that point on for all the associated pages.
Reply
147.
zan
Reply
148.
tamtam
Reply
149.
JT
In the previous version of this article, Chris put everything in one big section. It was very helpful. I did
the same thing below
Reply
150.
Natalie
Reply
151.
Najeh
Reply
152.
Brian
Hi,
Is it possible to target individual screen sizes instead of using min-width and max-width etc
1024 x 768
up to
1920 x 1080
Then eventually work into mobile devices, but I found it particularly difficult to target that way. I have
tried lots of ways but it just seems that if I use min-width, max-width for example, I usually end up
changing the styles for several resolutions with only one media query. Any solutions to this? I know a
lot of you go through this (when starting out), but what have you done to resolve this issue? Any tips
and/or suggestions?
Thank you
Brian
Reply
153.
Carlie
Hello.
I have two div containers for food menu items. One is called menu-container and is a class the other is
mobile-menu and is an id. I want to show just .menu-container on the desktop and just #mobile-menu
on phone and tablet. I have the max-width set to 1047 and the min-width 1048. When I view it mobile
everything looks and works great but when I view it on the desktop both menus show.
This has been driving me crazy and I am not sure how to resolve this issue.
Thanks,
Carlie
Reply
154.
Greggman
These media queries dont seem to work on iOS 8.3 (havent tested older OSes). Unless Im missing
something. For example heres a simple test. For iPhone4/4s the background should be red. For
anything larger it should be blue.
But it ends up being red for iPhone5/5s, iPhone6, iPhone6Plus. Its blue for iPadAir, iPad Retina,
Desktop.
How do I get it work for iPhone4/4S only? (basically shorter screens)
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Reply
155.
wady
Reply
156.
mukesh
hi i wants to now media query for the landscape and Portrait width and height
Reply
157.
hiremwfor.com
Reply
158.
Luke
Is it possible to target a particular screen width AND HEIGHT? For instance, weve developed a touch
screen kiosk/web app thats nothing more than a responsive website tailored to a specific touchscreen
monitor width and the usual mobile sizes. The issue comes in the bleed-over of target sizes via min-
and max-widths causing a layout fix on the touchscreen to break the layout on mobile devices. If
theres a way to target a specific width WITH a specific height, that might fix our issue.
Reply
159.
Nate
But, isnt there something much simpler that Zurb Foundation is doing? And what about device-aspect-
ratio instead of pixels?
Reply
160.
Ken Swarthout
Man, Im having trouble with this media query stuff. I followed a tutorial on how to build a navigation
bar. I built my navigation bar off the tutorial. Its a bit different. I just took the basic idea from the
tutorial. Anyway, this is my problem, when the screen is smaller, the nav bar changes. You can click the
nav bar. It opens up a vertical navigation bar (I call this a mini-menu). While the mini-menu is open, if
you resize the browser and make it larger than 840 pixels, the old navigation bar is misplaced. You can
see what Im talking about at my site. http://JetBBS.com/test2.html. Do you have any ideas how I can
fix this? Ive tried just about everything I could think of! I think I need to do something in the jQuery
code (http://JetBBS.com/js/click.js) but Im not sure what. jQuery isnt my strong suit. Thanks!
Reply
161.
Aeakanshi Agarwal
I want to known the difference between media query and breakpoints,is there is any difference
between both of them,
if yes then please Reply
thank you.
Reply
162.
Al
Permalink to comment# July 23, 2015
Any particular reason why screen is the target and not all as in
Reply
163.
Hkan Olsson
Sorry but can someone explain how and when this article is helpful.
Example:
The query in the iPhone 4 and 4S section (copy/pasted below) is going to effect a lot more devices than
iPhone 4 and 4S.
/* iPhone 4 and 4S /
/ Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {}
Another thing. In the query how do the (max-device-width: 480px) relate to iPhone 4 and 4S though
the device-width for these two devices is 320px?
Reply
o
Spork Schivago
I think what the developer was showing was the media queries for the various iPhone stuff.
Yeah, itd work with other devices, but it definitely works with the iPhone 4 and 4S. I do believe
thats why hes grouped it under the iPhones section. Theyre basically saying hey, this is the
media query for iPhone 4 and 4S. Other phones that use the same resolution will be included as
well, but if youre looking for the code to support iPhone 4 and 4S, here ya go.
Unnie
For iphone 4 and 4s the maximum device width is 480px which is for the landscape mode.
164.
Hkan Olsson
For iphone 4 and 4s, device-width would probably be 480px in landscape mode but only if these two
devices were Android phones.
Device-width works differently on IOS and Android. For Android its (usually/not allways) two (2)
device-width. One for the short side in portrait orientation and the other for the long side in landscape
mode.
However, in IOS there is only one (1) device-width. Its the shorter side, no matter what orientation. So
actually, for the iphone 4 and 4s the device-width is 320px even in landscape orientation.
Another problem is that different browsers respond differently to device-width. Example: The Android
default browser and Dolphin (but not Chrome, Opera, Firefox) use physical values not CSS pixels which
is the norm.
All this together means that using device-width for the page layout is not very far from using random
numbers :|
Reply
165.
Wasim Khan
Cool Stuff,
What about the bigger screens, that exceeds 1244px like 1824px.
Can we use
@media screen
and (min-device-width: 1800px)
and (max-device-width: 2200px)
and (-webkit-min-device-pixel-ratio: 1) {
}
Reply
166.
Frank @tekshrek
Grandios! :-D
Reply
167.
sbrewitt
Im not a developer at all but trying thank you to everyone whos posted here. Its helped me. Can
anyone tell me what I have two ads returned in this code? Or how I need to correct it? Very grateful.
function resizer() {
googletag.pubads().refresh([window.Leaderslot]);
}
window.addEventListener(resize, function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizer, 250);
});
Reply
168.
sbrewitt
Reply
169.
Sean Cannon
Reply
170.
Diogo
Permalink to comment# September 16, 2015
If any one have doubts and windows sizes etc Place this JavaScript alert to kwon all informations
about window sizes(width and height) and device pixel ratio to help to develop better your
mediaqueries. Thank You
JavaScript code:
alert(
Device PixelRatio: + window.devicePixelRatio +
\nDevice Width: + window.innerWidth +
\nDevice Height: + window.innerHeight
);
Reply
171.
TB
There are duplicate queries for ipad mini and ipad 1-2 which is a bit confusing.
Reply
172.
Chip
I am making a website but dont know which pixel values to put in my CSS. What would you suggest be
the three most basic width ranges?
For example:
@media screen
and (min-device-width: ???px;)
and (max-device-width: ???px;)
Reply
o
Hkan Olsson
Hey Chip
Save yourself from lots of trouble dont use device-width. Its a waste of time. Why? Because
different devices report differently. This means the result will be random thus useless.
I have done several tests with many devices. If folk used solely iPads and iPhones it would
work. However on the Android side its inconsistent. So, you cant control what you want to
control.
(You can read more details about this about 7 posts up)
Cheers
173.
Trevor
Using device specific viewports is not very forward thinking. I agree with the ideas in this article:
https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints
Reply
nate
I just want to know how to set up media queries to work with the majority of devices. Device-
specific is not the route Id like to go because there are an insane amount of devices, but I still
want to know the basic media query breakpoints that I should use and best practices for doing
so. Any tips?
174.
Troy
Reply
175.
Anurag
Whats the difference between min width and min device width?
Reply
176.
Appso
I need media query for windows Microsoft/Nokia lumia 520 and above.
Reply
177.
Bruno Amaral
Reply
178.
Maruthi
Reply
179.
gad
Wow is great your tutorial to understand better the term media for the mobiles, this my responsive for
my two sites:
/* MENU */
#plus-haut {display:none}
.haut_bloc{display:none}
#reseaux{display:none}
.bloc_responsive{
/* background-color:#15497d; */
background-color:#67aabf;
background-repeat:repeat;
width:100%;
height:100%;
}
.haut_bloc_responsive {
padding-left:0px;
text-align:center;
left:0px;
}
.haut_bloc_responsive img{
margin-top:20px;
margin-top:10px;
}
.haut_bloc_responsive li {
list-style:none;
font-family:'font-h2';
font-size:20px;
#tel-mobile {
font-size:30px;
line-height:20px;
font-weight: bold;
color : white;
width:110%;
margin-top:20px;
}
#title-header-mobile{
font-size:20px;
line-height:40px;
font-weight: bold;
color : white;
}
.menu-responsive {
font-size:18px;
font-family:'font-h2';
color:#FFFFFF;
margin-top: 2px;
margin-left: 0px;
padding-left:5px;
margin-bottom:0px;
display: inline-block;
text-align:left;
}
.menu-responsive2 {
text-decoration:none;
font-size:22px;
font-family:'font-h2';
margin-top: 0px;
margin-left: 10px;
margin-right:40px;
padding:0px; !important margin-bottom:0px;
display: inline-block;
float:right;
}
.menu-responsive-titre li{
font-size:17px;
font-family:font-h2;
text-align:center;
}
.bloc_responsive{
display:none;
}
#fond {
/* background-color:#15497d; */
background-color:#67aabf;
background-repeat:repeat;
min-width:1020px;
}
If you have something to improve in my code CCS please let me to know , thank you and please feel
free to help to improve this code
Reply
180.
Vuken Diesel
Permalink to comment# August 30, 2016
This is very cool how you list every single devices. While is it very useful, it can be very daunting and
overwhelming.
I usually use 4 ranges for my site that it.
1)smallest for wearable,
2)smaller for mobile phone,
3)medium for the tablet, and
4)large to max for laptop and desktop.
Thank you again for the detailed list. That is a lot of work and I bow to you sir. Thank you again for
awesome works on this site. I learned a lot from this site.
Reply
181.
Jayesh patel
http://eighttech.com/projects/8com/vpage.html
Reply
182.
Julio V.
Hi,
You have wrong device-width for Nexus 7, its 960px not 906px.
Reply
183.
Nate
Permalink to comment# December 10, 2016
Can you please explain why you used a media query like this? @media (max-width: 48.75em)
Reply
184.
Shafeequrrahman Khan
Hi,
Reply
185.
Siddharth
I wrote a mini library about it, i hope i will develop it more, have a look
Reply
186.
Sunny
In the above post, I see the CSS script up to Iphone 4 to Iphone 6/6 Plus. Looking forward the
Resolution ( min and max size) for IPHONE 7 & 7 plus. Could you please share the details.
/* iPhone 6+ */
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
Reply
187.
Alex Brown
If you think responsives simple, I feel bad for you son. We got 99 viewports, but the iPhones just one.
Josh Brewer, March 10, 2010
Reply
188.
User
Reply
189.
Nate
It seems like all you really have to do now is design your website to break wherever it looks good using
a desktop computer and Chrome web inspector tools.
Whatever the heck happens with retina and other high pixel density displays doesnt seem to matter
since apparently they make their higher amount of pixels display as if its the same amount of pixels as
a regular display.
Based on this, 768px still seems a reasonable breakpoint for tablets and 480px and 320px seems to be
a reasonable breakpoint for phones. Whether those dimensions are actually 1.5x, 2x, 3x or higher on
retina-like displays doesnt seem to matter as far as media queries are concerned.
Reply
190.
Simon Robertson
Personal opinion here of course, but your website really shouldnt care what device it is running on.
CSS media queries should be used to adjust the website layout, and possibly visual style, to provide the
best user experience possible for the device screen resolution (viewport size). Break points, if thats
your thing, can be determined based on the height of the viewport at runtime (100% HTML element
height, or a calc() derived from it, etc).
If you really need to provide device-specific content, using JavaScript or a server-side script to query
the user agent string is one solution, but it isnt super reliable due to the fact the user agent string can
be easily changed.
Reply
Submit a Comment
Name*
Email
Comment
4.1
Copy and paste this code: micuno *
Submit Comment
Posting Code
You may write comments in Markdown. This makes code easy to post, as you can write inline code like
`<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and
after.
Code of Conduct
Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like
writing a letter to the editor. All submitted comments will be read, but not all published. Published comments
will be on-topic, helpful, and further the discussion or debate.
Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.
Front-End Jobs
Subscribe
Email Address
CSS-Tricks web host since day one. Save 20% with code CSSTRICKS.
CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built
on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. It is made possible
through sponsorships from products and services we like.
Contact About Archives Advertise Jobs License Subscribe RSS Guest Posting