CSS@media,@keyframe用法

4782 ワード
study CSS テキストリンク
インタラクティブなWebデザインのメディアクエリー
現在は反応型Webを開発するフレームワークが多いが,CSSのみを用いて反応型Webを開発するためには@media{}が不可欠である.メディアクエリの使用方法についてまとめます.
@media screen(max-width:1000px) {
	/* css 코드 작성 */
}
上記のコードは、幅が最大1000 px(すなわち1000 px未満)のコードに適用される.
@media screen(min-width:1000px) {
	/* css 코드 작성 */
}
以上のコードは、幅が少なくとも1000 px(すなわち、1000 pxより大きい)のコードに適用される.
最近では,反応型ウェブデザインでは,小さいものから大きいもの,すなわち移動サイズからウェブサイズまでのデザインのmobile firstを用いることが多い.エンコードスタイルや状況によってはmobile firstのデザインが好きなので、min-widthを使ったメディアクエリーをもっと使うかもしれません.
アニメーションのキーフレーム
キーフレームはアニメーションを実装するときによく使われる機能で、任意の場所でアニメーション処理を行うことができ、詳細なアニメーションを容易に実現することができます.
/* index.css */
@keyframes apple {
  from{
    opacity:0.2;
    }
    
  to{
    opacity:1;
    }
    
.wrap {
    position: relative;
    display: flex;
    height:100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    animation: apple 1s linear 0.3s infinite alternate;
    }
<!-- index.html -->
<body>
<div class = "wrap"><i class="fab fa-apple"></i></div>
</body>
keyframeでは、fromおよびtoの代わりに0%および100%を用いてもよいし、47%を用いてもよい.
ASP.NETクライアント、サーバ側基礎情報の取得
バイナリツリーバイナリツリー/ルックアップゲーム