Home » CSS 3 » CSS Media Queries

CSS Media Queries

CSS Media Queries

CSS media queries is used to assign different style sheets depending on browser window size. It is very useful when we creating websites or applications for different platforms. CSS Media queries allow you to target CSS rules based on – for instance – screen size, device-orientation or display-density. This means you can use CSS Media Queries to tweak a CSS for an iPad, iPhone, Android, Black Berry, printer or create a responsive site.

A media query consists of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color. A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the “Applies to” line), and all expressions in the media query are true.

The CSS media query syntax for calling an external stylesheet

@media all and (max-width: 699px) and (min-width: 520px) {
#sidebar ul li a {
padding-left: 21px; background: url(../images/email.png) left center no-repeat;
}
}



Media query on a link element

<link rel="stylesheet"  media="(max-width: 800px)" href= "example.css" />

meida query within a style sheet

<style>
@media (max-width: 600px) {
  .my_widget {
    display: none;
    }
  }
</style>

Media Query Examples

To style for many smartphones with smaller screens, you could write:

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

To block older browsers from seeing an iPhone or Android phone style sheet, you could write:

@media only screen and (max-width: 480px;) { … }

To capture most tablets, you could write:

@media screen and (min-width:400px) and (max-width:800px) { … }

To target the iPad, you could write:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { … }

To target the Xoom tablet, you could write:

@media only screen and (min-device-width: 1280px) and (max-device-width: 800px) { … }

To style for a device in portrait mode, you could write:

@media screen and (orientation: portrait) { … }

To print a document only on 300dpi or better printers, you could write:

@media print and (min-resolution: 300dpi) { … }

To target any device with a 16:9 aspect ratio, you could write:

@media only screen and (device-aspect-ratio: 16/9) { … }

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*