CSS3媒體查詢的動畫回應佈局

這篇文章給大家分享的內容是關於CSS3媒體查詢的動畫回應佈局，有感興趣的朋友可以看一看，我們來看正文內容。

什麼是媒體查詢

CSS3為我們帶來了許多我們用於網頁設計的新功能，其中一項功能可以幫助改善網站的可用性，即媒體查詢。

媒體查詢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 */
}

動畫版面變更

使用CSS我們可以為您的不同元素新增動畫，我們也可以將動畫指派給這些元素的不同屬性。

如果我們使用媒體查詢，那麼我們很可能會更改元素的寬度和高度，以便它可以適合頁面。我們知道寬度和高度都在變化，我們可以使用以下程式碼將動畫添加到寬度和高度的CSS屬性中。

/* 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;

以上是CSS3媒體查詢的動畫回應佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！