當設定viweport 意思是只有告訴html , 尺寸要按照手機屏幕作依據.
但是放在不同設備的時候肯定會有尺寸不合的問題.
這個時候需要做一個尺寸設定.
如果是用px 去計算該怎麼切版, 哪很容易出差錯.
舉例 :
<body width = “ 731px “ >
<contain width = “ 423px” >
<img width = “ 50px “ >
用比例去計算：
<body width = “100%“> ← 731
<contain width= “ 57%” > ←423 /731
<img width = “ 11% “> ← 50/423.
上述注意到了嗎？每一個比例都是來自於父框架.
所以當瀏覽器在縮拉的時候計算機會知道每個flex 都有個依據比例.
比例的彈性限制 ：
當瀏覽器尺寸比較寬時 , 如下圖 ：
<左邊圖片> width = 50 %
<右邊 About Yiru > width = 50 %
＠media screen and ( max-width:600px )
當這個圖片的寬度大於600px時 , 最大.
無論視窗怎麼拉長, viewport 的寬度會一直保持在600px
<沒有設定max-width在桌上型螢幕有些甚至很長. 會因此導致圖片變形 >
em 字體相對單位
em是文字大小的單位, 也是依據父元素去比例計算.
文字的父元素單位 font-size