I found the following line of code inside Wordpress' Twenty Eleven theme stylesheet.
What does it mean?
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
Asked
Active
Viewed 2.6k times
8
Andrew Harvey
- 103
- 6
user2322509
- 277
- 4
- 6
- 10
-
Take a look at this website: http://responsivedesign.ca/resources – Michael May 06 '13 at 16:20
-
possible duplicate of [What is the difference between max-device-width and max-width for mobile web?](http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web) – Adrift May 06 '13 at 16:20
-
1Google is your best friend. Afterwords come to us... – Lior Elrom May 06 '13 at 17:30
-
3@Bram: I just googled this, and this question was the top result. I often find SO gives quicker access to what I need to know than the original documentation. I guess it's a high-level goal question of what SO is for--but as far as I'm concerned, questions like this are very useful. – Cephron Jan 06 '14 at 20:04
-
1@BramVanroy, Cephron is right. This is actually a useful question. I always search Google and then look for Stack Overflow answers. This is exactly what happened in this case and the accepted answer provided exactly the info I needed. Isn't the point of SO to ask and answer questions??? – Luke Feb 14 '15 at 02:30
2 Answers
13
It's called CSS3 Media Queries which is a technique to help your website adapt to various of screen dimensions or basically, it helps to deliver different styles to different devices.
Since you're new, let's break down your media query to two parts:
@media only screen
This means we will apply css styles to a device with a screen. The keyword only used here to hide style sheets from older browsers from seeing phone style sheet.
and (min-device-width: 320px) and (max-device-width: 480px)
This is quite obvious since it means that the specified css only applied when a device has a screen's size with minimum 320px and maximum of 480px in width dimension.
Eli
- 14,779
- 5
- 59
- 77
-
Yeah but then what? Do I write my css classes after that line or what? – Gilles Lesire Jun 06 '14 at 09:38
-
`@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {` _// CSS styles in here that you only want applied to the above_ e.g. h1 { font-size: 3.0em; } `}` – Luke Feb 14 '15 at 02:38
0
Let's understand the meaning of code step by step:
You code was:
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
The @media rule is used to define different style rules for different media types/devices.
The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.
To limit the styles to devices with a screen and whose min and max width is known, you can chain the media features to the screen media type:
screen and (min-device-width: 320px) and (max-device-width: 480px)
For further guidance you can check MDN website by clicking here
