210930_css(4)

2514 ワード
px テキストリンク

CSSの値と単位


単位は何も使えないから!!利用可能な単位を勉強してください.
許容度はmdnでproperty値を検索できます
  • 相対長単位:基準点がある場合、基準点の相対割合
    • である.
  • 絶対長:ディスプレイ表示の固定値単位(pxのみ)
  • 多くのユーザーはブラウザにデフォルトのフォントを追加して読みやすいようにしていますが、この絶対長はユーザーの設定に合わないため、アクセス性の問題が発生する可能性があります*
    • 数値+文字単位
    パーセントラベル:数値+%

    em,rem


    em


    1 em==親のfont-size
    .parent{
color:blue;
font-size:2em;
}

.child{
color:red;
font-size : 0.5em;
    結果画面

    デフォルトブラウザのフォントサイズ16 pxは現在親が32 px、childが16 pxに設定されており、出力を確認できます

    計算でemの値を決定できます

    rem


    1rem === root font-size 
    .parent{
color:blue;
font-size:2rem;
}

.child{
color:red;
font-size : 1.5rem;

    デフォルトのブラウザ本体のフォントサイズは16 pxなので、この計算に基づいて
    だから近づきやすい!!

    vw , vh


    ビューポートに関連する長さは、Webサイトの領域が表示され、相対的な長さです.

    LCDのサイズはビューポートに相当します

    vw:ビューポート初期プロファイルブロック幅


    vh:初期輪郭ブロックの高さ

    .cotainer{
	width: 50vw;
    height: 50vh;
    }

    vmin, vmax


    -vwやwmと同じですが、反応型では横型と縦型ごとに設定が異なります.
  • は常に小さいのがvminで、大きいのはvmax
    • です
    .cotainer{
	width: 50vmin;
    height: 50vmax;
    }

    persentage


    100パーセントの基準は親の値に準ずる
    .parent{
	width: 50%;
    height: 100px;
    background-color:blue;
    }
    
 .child {
	width: 50%;
    height: 30px;
    background-color:indianred;
    }

    関数シンボル


    calc()


    関数パラメータとして式を受信し、式の結果が最終値になります.
    複数の単位を混在させることができます.
    width : calc(100% -80px);

    min()


    ブラウザはより小さな値を選択します
    width : min(100%,200px)

    max()


    二者択一
    width : max(100%,500px)
    🚨 min()とmax()は役に立ちますがexplorerではサポートされていません
    Docker TeamSpeakマルチユーザ音声チャットサーバの迅速な構築
    Build simulator on Windows (Visual Studio)