• CSS Media Queries

    Posted on June 16, 2015 by Hamidul Islam in Responsive Design.

    CSS-Media-Queries


    aimCSS Media Queries are added in CSS3. Before CSS3, media queries were known as media types. Media queries are nothing but some sort of CSS syntax which basically deal with media types like Laptop, mobile, tablet etc. Media types are simply physical devices where we can see the user interface. So by the term media types we will simply mean that it may be  Desktop Computer, Laptop, Mobile etc. 


    Very simple Real Time Problem:

    If you are fully new to the CSS Media queries then just consider the real problem of the world. Consider you are CSS expert and in your CSS style sheet you have defined width to 500px for an element like div or some thing else. The look and feel may be OK when its viewed in wider screen like Laptop. But what about mobile devices? You may see some odd look and feel in the smaller devices. This is just a simple example. There might be many other problems with the sizes of devices. CSS Media Queries are the rescue for all the situations. 

    Defining CSS Media Queries:

    CSS3 media queries are logical expressions that evaluate the current values of media features in the user’s browser. If the media query expression evaluates as TRUE, the contained CSS is applied.

    Media Query Syntax:

    @media  mediatype and (media feature) {
    CSS-Code;
    }

    1. All media queries starts with @media

    Example

    @media screen and (min-width:490px) {
    	/* Some CSS */
    }
    /*max-width can also be used*/
    

    The meaning is: 

    Are we presently rendering content on a screen, AND is the window currently at least 490 pixels wideYes? OK! Apply these CSS rules.

    2. Whats screen in the above?

    In the above code screen is media types. There are other types also. Below are the media types including screen 

    i) screen : Any device which has screen. Example Laptop, Smart Phone, Tablet etc.

    ii) print : Used for printers. 

    iii) speech : Used for screen readers that  reads the page.

    iv) all : Used for any device

     3. Using comma as logical OR 

    @media print, screen and (monochrome) {
     /*Some CSS*/
     }
    

    Is this being rendered on a printer OR is it being rendered on a screen that is monochrome (black and white)?
    Yes? Use these styles!

    4. CSS for only Black and White Printers 

    @media print and (monochrome) {
    	/*Some CSS*/
    }
    

    monochrome is to represent black and white. For color printer if we want to define css then

    @media print and (color) {
    	/*Some CSS*/
    }
    

    5. The below css will be applicable only for color screen

    @media screen and (color) {
    	/*Some CSS*/
    }
    

    6. Using external css

    <link rel="stylesheet" type="text/css" href="some.css" media="screen and (color)" />
    

    The above external css will be applicable only for media type screen with colors.

    7. Using only 

    The old browser does not understand media queries. To hide such css rules for old browser we use only 

    @media only screen and (max-width:500px){
    /*Some CSS*/
    }
    

    There is no such media type only. So the style sheet will be ignored by the old browser. But for the modern browser the css will be applied to screen media type. To take care of old browser only should be used immediately after @media. 

     

    List of Media Features

    min-width: Specifies the minimum width of the display area

    min-resolution: Specifies the minimum resolution of the device, it may be dpi or dpcm

    min-monochrome: Specifies the minimum number of bits per "color" on a monochrome (greyscale) device

    scan: Specifies progressive or interlaced scanning of a television

    width: Specifies the width of the display area

    resolution: Specifies the resolution of the device, it may be dpi or dpcm

    monochrome: Specifies the number of bits per "color" on a monochrome (greyscale) device

    orientation: Specifies whether the display is in landscape mode or portrait mode

    min-height: Specifies the minimum height of the display area

    min-device-height: Specifies the minimum height of the device

    min-device-width: Specifies the minimum width of the device

    min-device-aspect-ratio: Specifies the minimum ratio between the width and the height of the device

    min-color-index: Specifies the minimum number of colors the device can display

    min-color: Specifies the minimum number of bits per color component for the output device

    min-aspect-ratio: Specifies the minimum ratio between the width and the height of the display area

    max-width: Specifies the maximum width of the display area

    max-monochrome: Specifies the maximum number of bits per "color" on a monochrome (greyscale) device

    max-resolution: Specifies the maximum resolution of the device, it may be dpi or dpcm

    max-device-width: Specifies the maximum width of the device, such as a computer screen

    max-height: Specifies the maximum height of the display area

    max-color: Specifies the maximum number of bits per color component for the output device

    max-aspect-ratio: Specifies the maximum ratio between the width and the height of the display area

    device-height: Specifies the height of the device

    device-aspect-ratio: Specifies the ratio between the width and the height of the device

    aspect-ratio: Specifies the ratio between the width and the height of the display area

    color-index: Specifies the number of colors the device can display

    color: Specifies the number of bits per color component for the output device

    max-device-height: Specifies the maximum height of the device

    max-device-aspect-ratio: Specifies the maximum ratio between the width and the height of the device

    max-color-index: Specifies the maximum number of colors the device can display

    grid: Specifies whether the device is a grid device or not

    height: Specifies the height of the display area

    device-width: Specifies the width of the device

    Summery

    Media Queries are basic building blocks of responsive design. Media Queries can be used for Liferay responsive theme development as well. 

    Post Tagged with , ,
Comments are closed.
Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close