CSS3 미디어 쿼리를 사용한 애니메이션 반응형 레이아웃

이 글의 내용은 CSS3 미디어 쿼리의 애니메이션 반응형 레이아웃에 관한 것입니다. 관심 있는 친구들은 주요 내용을 살펴보세요.

미디어 쿼리란 무엇인가요?

CSS3는 웹 디자인에 사용하는 많은 새로운 기능을 제공하며, 그 중 하나는 웹 사이트의 유용성을 향상시키는 데 도움이 될 수 있습니다.

미디어 쿼리 상용구

/* 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 속성에 애니메이션을 추가할 수 있습니다.

위 내용은 CSS3 미디어 쿼리를 사용한 애니메이션 반응형 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!