3

I'm using Twitter Bootstrap to responsive website and I don't understand the difference between

@media screen and (min-width: 768px)

@media (min-width: 768px)

"Screen" or not? any help?

Community
  • 1
  • 1
Quang Anh Ho
  • 51
  • 4
  • possible duplicate http://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries – Akki619 Aug 21 '13 at 07:07

3 Answers3

2

http://www.w3.org/TR/CSS21/media.html#at-media-rule

@media screen is computer screen, so

The first rule is for computer screens only with resolution width at least 768px.

The second rule is just for devices with width >=768px including tablets, phones, printers etc., that have high enough resolution.

Jakub Matczak
  • 15,341
  • 5
  • 46
  • 64
1

screen is a media type and means that rule will be used on computer screens. Without it it's just a general rule and will be applied for all media types.

slash197
  • 9,028
  • 6
  • 41
  • 70
1

The browser identifies itself as being in the “screen” category.

Specification applies to devices of a certain media type (‘screen’) ,screen is intended primarily for color computer screens. So it identifies roughly to modern devices desktop smartphone etc

So it will work for color computer screens at differing resolutions e.g.

Mobile

only screen and (min-width: 480px)

Tablet

only screen and (min-width: 768px)

Desktop

only screen and (min-width: 992px)

Huge

only screen and (min-width: 1280px)

Shaun Hare
  • 3,771
  • 2
  • 24
  • 36