Deference Between @media OR @media screen OR @media only screen

How to write a media query to target specific devices.

A media query is introduced in CSS3. You can use @media rule to include CSS properties only if a certain condition is true. For example you can define different style in @media rule when user agent has max or min-width:320px or as per your choice. Back to point, Now I’m going to discuses what is the different between @media OR @media screen OR @media only screen. Let’s break down one by one.

@media (max-width:600px){}

This code is saying that you can apply max-width:600px for a window.

@media screen and (max-width:600px){}

This code is saying that you can apply max-width:600px for a device with a screen and a window with max-width of 600px. This is almost identical to the above because here you are specifying screen in code.

@media only screen and (max-width:600px){}

This code is saying that you can use this to hide style sheets from older user agents when max-width:600px   Here is a quote from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
  Go here and check out Example 9.  

Related Articles

Create IAM User with full Access s3

Switcharys (HTML Toggle Switch Button) are part of the modern UX and are...

Read More
  • 360 Degree View video of the belaire

    DLF Belaire is one the finest properties on DLF phase 5 . Mindmyweb worked with pickahome to create...

    Read More
  • Balloon design for pickahome

    This is a virtually edited video we made just for fun. Designed with a Read More

  • Indian Guys Try girly drinks

    Funny alcohol review video created by coctail crew...

    Read More
  • Joininghands Donation Poster

    Quick promotional poster for joining hands India Read More

  • Shooting DLF Pinnacle on iphone 6

    I was just passing DLF pinnacle gurgaon when I decided to shoot a very unique view of this lovely...

    Read More
  • Arial Panorama For MGF Villas | pickahome

    A look at some stunning Arial time laps photos of Read More

  • Arial Panorama for DLF phase 2 | Real Estate

    DLF phase 2 is a residential...

    Read More
  • Arial Panoramic images for DLF phase 5

    Arial Panoramics were one of the biggest challenges for the Read More

  • How to install Pokémon go on iphone from India / Singapore / Japan

    The world is going Pokémon go crazy and there is a good reason for that. ITs a revolutionary game...

    Read More
  • How to display Indian rupees symbol in modern browser

    As a web developer when I see errors on the web it hits me immediately. I am seeing large...

    Read More
  • Deference Between @media OR @media screen OR @media only screen

    How to write a media query to target specific...

    Read More

  • 5 experiential tips for aspiring entrepreneurs

    Respect is important

     

    Over the years I have met a lot of...

    Read More
  • Life Lesson's – Does your startup have the right gear?

    Life Lesson’s – Does your startup have the right gear?

    I remember...

    Read More
  • 5 startup lessons from counter strike

    I have been a gamer for as long as I remember – I always wanted to be a game designer as a...

    Read More
  • -->