CSS3 メディア クエリを使用したアニメーション応答性の高いレイアウト

この記事の内容は、CSS3 メディア クエリのアニメーション化されたレスポンシブ レイアウトに関するものです。興味のある方は、メインの内容を見てみましょう。

メディア クエリとは

CSS3 は、Web デザインに使用する多くの新機能をもたらします。Web サイトの使いやすさの向上に役立つ機能の 1 つはメディアです。お問い合わせ。

メディア クエリボイラープレート

/* 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 中国語 Web サイトの他の関連記事を参照してください。