今日の授業は昨日習った概念を復習したような感じがします!!
昨日学んだ新しい知識と混同した部分をメモした.

Animation

.animation{
	animation-name: changeWidth;
    animation-duration:2s;
    animation-timing-function:linear;
    animation-delay:3s;
    animation-iteration-count:6;
    animation-direction: alternate;
}
    
@keyframes changeWidth{
	from {width: 300px;}
    to{width:800px;}
}

animation-delay:アニメーション開始前の遅延時間のプロパティを設定するanimation-timing-function:アニメーション速度カーブのプロパティを制御するanimation-duration:アニメーション斜線の実行時間を設定するプロパティanimation-iteration-count:アニメーションの再生回数を制限するプロパティanimation-direction:アニメーション進行方向

alternate: from --> to --> from

normal: from --> to

reverse: to --> from

メディアクエリ

PC、モバイル機器、タブレットに対応したWebサイトを作成するために、
css構文、移動に対応するインタラクティブまたは適応Webサイトの作成

反応型:適応型より自然な変化

適応型:ブラウザサイズが減少するにつれて、フォントサイズまたはサイズの変化が一気に中断し、

が変化する.

メディアクエリーの確認

メディアクエリの正常な出力を確認する方法
1.クロム開発者ツール
2.次のトロイ実験室
次に作成するサービスはtroilabsに初めて接触しますが、troilabsの結果はサーバに登録されており、urlアドレスを入れる必要があります.

メディアクエリを使用する際の注意事項

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">メディアクエリが正常に動作しないという問題が発生する可能性があります.そのため、モバイルデバイスで予想される画面を表示するには、ビューポートの幅とスケールを設定する必要があります.viewport:各種デジタル機器の画面に表示される領域を指し、幅とスケールを設定する際に使用されるメタタグの属性の一つである.content

width=device-width
viewport幅=デバイス幅

initial-scale=1.0
スケールは常に1.0

cssプロパティの継承

メディアクエリは、外部領域からcssプロパティを継承します.
メディアクエリに外部属性が作成されていない場合は、外部属性が継承されます.