Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does this line of CSS mean? @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

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)
like image 308
user2322509 Avatar asked May 06 '13 16:05

user2322509


People also ask

What does @media only screen mean in CSS?

@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)

What is the max width of media in CSS?

@media (min-width: 576px) and (max-width: 768px) { ... } Above CSS will be applied to only those screens whose width is greater than 576px and less than 768px. // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ...

What is @media only screen and (max-width 576px) in CSS?

Above examples states that the specified block of media CSS will be applied only when the device width exceeds 576px or becomes equal to this. It means that above CSS will be applied whenever the application is opened in the larger devices. i.e. Tablet or Desktop. @media only screen and (max-width: 576px) {...}

What is @media rule in CSS?

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. Show activity on this post. The @media rule is used to define different style rules for different media types/devices.


1 Answers

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.

like image 113
Eli Avatar answered Nov 15 '22 20:11

Eli