使用vh、vw單位

vh : view height，也就是螢幕可視範圍高度的百分比

vw : view width，也就是螢幕可視範圍寬度的百分比

如果設定 width:20vw;  height:20vw，會呈現一個長寬皆為視窗寬度20%的正方形

用此方式可以製作出長寬比例固定的元素，例如 :

你希望一張圖片的大小可以隨視窗大小而改變，又不會使圖片變形，就可以使用此單位，只是要注意瀏覽器的支援性

另外還有vmin、vmax單位可以使用

詳情可參考 : https://pjchender.blogspot.com/2015/04/css-3vh-vw.html