Click the link below to check your device media query

CHECK MEDIA QUERY

A Quick Example How to target

Samsung Galaxy S3

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)

 

But if we want to change the code slightly like below we’ll be able to target NOT ONLY SAMSUNG GALAXY PHONES BUT ALSO IPHONES for portrait view

/* Smartphones (portrait) ———-- */

@media only screen and (min-width : 320px) and (max-width : 480px) {

/* Your Styles go here*/

}

And for landscape view we can write

/* Smartphones (landscape) ———-- */

@media only screen and (min-width : 320px) and (max-width : 640px) {

/* Your Styles go here*/

}

It’s a good idea to have separate code for landscape and for portrait view. And for normal PC/Laptop view, we can leave the default css codes at the top of media queries while developing our application on PC/Laptop.

 

HOW to write CSS media queries

CSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied. This allows you to apply a special CSS for mobile, or adjust a layout for print.

The basic syntax looks like this:

// normal style
#header-image {
    background-repeat: no-repeat;
    background-image:url('image.gif');
}

// show a larger image when you're on a big screen
@media screen and (min-width: 1200px) {
    #header-image {
        background-image:url('large-image.gif');
    }
}

// remove header image when printing.
@media print {
    #header-image {
        display: none;
    }
}
But can also be called like this:

<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />

The advantage of this method is that only the valid CSS is downloaded; so no print.css is only downloaded when printing (or using print preview).

Combining mediaqueries can be done by combining them with an comma. The query below is to target devices with an device-ratio of 1.5. The first element is for webkit, the second if for all other browser (1.5 * 96).

@media screen and (-webkit-device-pixel-ratio: 1.5), screen and (resolution: 144dpi)

Because it’s cascading all non-overwritten rules remain valid; e.g. the background remains no-repeat.

Using this syntax you can do a couple of things;

  1. Tweak that font so it really fits on that old iPhone,
  2. Remove menus and fluff from Print pages
  3. Create a full responsive site, by creating ‘breakpoints’ where the page should get a different design.

For example:

#block1, #block2 {
    float: left;
    width: 100%;
}

@media (min-width: 1000px) {
    #block1, #block2 {
        width: 50%;
    }
}

This example shows the 2 blocks on big screens next to each other, while on small screens they will be displayed below each other.

Support

All modern browser support Media Queries. Internet Explorer supports it in IE9. All modern mobile browsers are supported, including Blackberry 7.0 and 10.0.

Features

A media query syntax is made up by a media type and zero or more expressions.

Available media types:

all
All devices listen to this
braille
Used for braille tactile feedback devices.
embossed
Used for paged braille printers.
handheld
Used for handheld devices (Smartphones and tablets do NOT listen to this!).
print
Used for paged material and for documents viewed on screen in print preview mode.
projection
Used for projected presentations, for example projectors.
screen
Used primarily for color computer screens and smartphones.
speech
Used for speech synthesizers.. (Whatever that may be)
tty
Used for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
tv
Used for television-type devices (low resolution, color, limited-scrollability screens, sound available).
Available expressions:

width
The width of the current window
height
The height of the current window
device-width
The width of the device
device-height
The height of the device
orientation
Either landscape or portrait
aspect-ratio
The aspect ratio of the current window
device-aspect-ratio
The aspect ratio of the device
color
The number of color bits per color component
color-index
The number of available colors on the device
monochrome
The number of bits per pixel in a monochrome frame buffer
resolution
The resolution of the device
scan
Eiter progressive or interlace
grid
Is the device grid-based?

Categorized in:

Magento

Tagged in:

, , , ,