關於媒體查詢中斷點的設定，有兩個點需要格外注意！

如何選擇斷點

一般情況下，建議根據螢幕尺寸進行斷點分割，不要針對特定裝置分割。

根據設計稿選擇合適的斷點。

動態斷點設定

在實際應用過程中，使用者會根據需要改變瀏覽器預設文字大小 ，若讓斷點能夠隨著文字的變化而變化，使用者體驗更佳。
假設設定的斷點為，(max-width: 800px) (min-width: 481px and max-width: 800px) (max-width: 480px)

HTML字型大小為，html {font-size: 62.5%} （1rem = 16px * 62.5% = 10px）

換算成rem，(max-width: 80rem) (min-width: 48.1rem and max-width: 80rem) (max-width: 48rem)
    媒體查詢的優先順序比較高，並不是HTML的子元素
    這裡不是根據html中字型大小設定 1rem = 10px換算 (800px / 10 = 80 rem)
    而是根據瀏覽器預設字型大小設定 1rem = 16px換算 (800px / 16 = 50 rem)
換算成rem，(max-width: 50rem) (min-width: 30.0625rem and max-width: 50rem) (max-width: 30rem)
    這邊斷點設定是根據瀏覽器而言，而不是根據HTML，使用rem就沒有必要（rem有相容性問題也有部分瀏覽器bug）
    可以直接使用em為單位

最後結果：

@media only screen and (max-width: 50em) {}

@media only screen and (min-width: 30.0625em) and (max-width: 50em) {}

@media only screen and (max-width: 30em) {}