CSSでよく使われる単位(em/rem、vw/vh、vmin/vmax)

1、em/rem
Emのサイズは、自分のフォントのサイズに応じて、emの倍数を乗じて、コードは以下のように、効果は自分でコピーして試します.

em 
   em
      em
         em
            em
            
         
      
   

たとえば、ボタン->フォントサイズを変更するだけで、ボタンのサイズを変更できます.コードは次のとおりです.

  
.button{width:4em; height:2em; font-size:14px;}

たとえば、カスタムコンポーネントを作成します.

   
  
   
  
     

.template{ font-size:24px; height:10em; width:20em; background:gray; padding:0.6em; box-sizing:border-box; }
.header{ font-size: 2em; font-weight: bold; }
.section{ font-size:1.4em; height:2em; }
.button{ width:4em; height:2em; font-size:1.4em; }

次の値はフォントの大きさを変える必要があり、内部の内容が適応し、まだ皮がむけていないような気がします.欠点は、emが多すぎるコンポーネントをネストするのに適していないことです.そうしないと、各コンポーネントが親ノードのサイズを計算するたびに、損をしません.
次にrem,remのサイズは,Webルートノードのサイズに依存する.

rem
   rem
       rem
         rem
            rem
            
         
      
   

個人的には、1つのページがpxを使うかemを使うかremを使うかは葛藤する問題ではないと思います.どうせお金は必要ありません.完全に挿入して使って、適切な単位で適切な問題を解決することができます.
2、vw/vh
vw/vh現在のウィンドウの1%width/height->100 vw=100%ウィンドウ幅||100 vh=100%ウィンドウ高さ
例えば、初心者にとって、下部はページが画面を超えたときに、ドキュメントの高さに適応し、404などの奇抜なページのときに、画面の下部に密着するという問題がある.

   
main
   

欠点:この底の高さは適応できず、もっと多くの解決策があります.興味があれば、後で書きます.急いで知っていれば、伝言を残してもいいです.
3、vmin/vmax
vmin/vmaxは、現在のウィンドウの最小/最大パーセントで、
これはあまり言わないで、結局あまり使わないで、個人はやっと浅くて、しばらく使っていません.またexやehは、具体的にはあまり知られていませんが、フォントベースのメトリック単位で、現在設定されているフォントに依存して、興味のある人は度娘に聞くことができると言われています.