最近我換了一臺電腦，打開了自己之前寫的網頁，發現界面布局全部錯亂了。經過排查，發現原因是因為換了電腦后瀏覽器默認字體大小不同導致的。

為了解決這個問題，我使用了CSS中的em和rem單位，從根本上解決了這個問題。這兩種單位都是相對于父元素的字體大小來計算的，而不是相對于瀏覽器默認字體大小計算的。

html{
font-size: 16px;
}
p{
font-size: 1.2rem;
line-height: 1.5;
}
h1{
font-size: 2em;
}
@media screen and (max-width: 768px){
html{
font-size: 14px;
}
}

在這個例子中，html元素的字體大小被設置為16px，然后p元素的字體大小被設置為相對于父元素html的1.2rem，h1元素的字體大小被設置為相對于父元素的2em。這樣就可以根據需要靈活地調整字體大小，而不會因為瀏覽器默認字體大小的變化而導致布局錯亂。

通過這個例子，我深刻意識到了 CSS 在網頁設計中的重要性，同時也學到了一些解決常見問題的方法，希望對大家有所幫助。