media rules css code example

Example 1: media query

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Example 2: orientation css max and min width media query

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Example 3: css media screen

@media (max-width: 991px){
    .mobile{
        display: block;
    }
}

Example 4: css @media

/* When the width is between 600px and 900px OR above 1100px */
@media screen and (min-width: 600px) and (max-width: 900px), (min-width: 1100px) {
  div.example {...}
}

Example 5: media types in css

:all 
Suitable for all devices.
:braille
Intended for braille tactile feedback devices.
:embossed
Intended for paged braille printers.
:handheld
Intended for handheld devices (typically small screen, limited bandwidth).
:print
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
:projection
Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
:screen
Intended primarily for color computer screens.
:speech
Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
:tty
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
:tv
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
/*Media type names are case-insensitive.*/