最近我换了一台电脑，打开了自己之前写的网页，发现界面布局全部错乱了。经过排查，发现原因是因为换了电脑后浏览器默认字体大小不同导致的。

为了解决这个问题，我使用了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 在网页设计中的重要性，同时也学到了一些解决常见问题的方法，希望对大家有所帮助。