moahvq
Last Updated: February 25, 2016
·
3.013K
· mehmetbat
215379 10150169088569415 4572741 n

Animated Responsive Layout with CSS3 Media Queries

What Are Media Queries

CSS3 brings us many new features we use for our web designs and one of the features that can help improve the web site usability is Media Queries.

Media Queries Boilerplate

/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Animating the layout change
With CSS we can add animation to your different elements, we can also assign animation to the different properties on those elements.

If we are using media queries then we are most likely going to change the Width and Height of an element so that it can fit on the page. As we know that width and height are changing we can add animation to the CSS property of Width and Height by using the following code.

/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;
/* moz */
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 1s;
/* opera */
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 1s;
Say Thanks
Respond

1 Response
Add your response

12097
0 ucicehxg 7mh zpbm tle bytevi zsbm9cje 92s7a dlsfca1m6icgyxsjl uwsq3ybxhqj al

nice

over 1 year ago ·