這篇文章給大家分享的內容是關於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中文網其他相關文章！
