问题
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)
回答1:
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.
回答2:
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
来源：https://stackoverflow.com/questions/16402870/what-does-this-line-of-css-mean-media-only-screen-and-min-device-width-320px