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ではサポートされていません