Media query in CSS

Media query in CSS
For responsive web designing,
1) Media Type
     All,Print,Screen,Speech,Braille,Embossed,handheld,Projection,TTY,TV
     The one which are highlighted /marked bold are mostly used.

2) Media Features
    Height/Width,Device-Width/Device-Height,Orientation,Aspect-ration,Device-aspect-ratio
    Color,color-index,Monochrome,Resolution,Scan,Grid,
    The highlighted ones are most used

3) Logical Operators

    AND ,OR,NOT – These are logical operators that are mostly used.

Example Queries

@media(min-width:500px){...}

Page width>500px

@media(min-width:700px)and(max-width:960px){...}

700px<Page width<960px

@media screen and not(device-aspect-ratio:4/3){...}

Device aspect ratio is not 4:3

@media screen and (device-aspect-ratio:16/9),scree and(device-aspect-ratio:16/10){...}

Device aspect ratio is 16/9 or 16/10

CSS importing – calling a CSS file from another CSS file , normaly done or writtten at the top and done as 

show below

@import “import.css”

The code snippet for manipulating the image or text when ever there is a change in the screen size(700px)

@media screen and (max-width:700px)

{

#css-image{

display:none;

}

#side-text{

display:none;

}

#header li:not(:first-child)

{

Display:none;

}

#banner-text{

Font-size:1em;

}

Arranging the contents in block

article {

display:inline-block;

margin-right:1 rem

coulmn-count: 2;                                                              //display two section  as two columns

-moz-column-count:2;

-webkit-column-count:2;

}

Rotate,Skew,translation,transformation,- Animation can be done with the help of media query for CSS

For cool animation :-P

nav a:hover {

text-decoration : undeline;

background-color:yellow;

transition-property:background-color;

transition-duration:5000ms;

transition-delay:10ms;

transition-timing-function:ease-in;

}