CSS是前端開發必須掌握的技能之一，其中包括如何控制頁面縮放。以下是關于如何控制頁面縮放的教程。 在CSS中，可以使用以下代碼來控制頁面縮放： ``` body { zoom: 80%; -moz-transform: scale(0.8); -moz-transform-origin: 0 0; -o-transform: scale(0.8); -o-transform-origin: 0 0; -webkit-transform: scale(0.8); -webkit-transform-origin: 0 0; } ``` 這段代碼將頁面的縮放比例調整為80%。它使用了四種不同的屬性和值，分別是`zoom`，`-moz-transform`，`-o-transform`和`-webkit-transform`。 `zoom`屬性應用于IE瀏覽器，并調整頁面的縮放比例。在這個例子中，我們使用了80%的縮放比例。 `-moz-transform`，`-o-transform`和`-webkit-transform`屬性應用于Firefox，Opera和Safari瀏覽器。這些屬性使用`scale`函數來控制頁面縮放比例，并使用`transform-origin`屬性來更改縮放的原點。 請注意，縮放比例為1則表示頁面沒有縮放。 如果要更精確地控制頁面縮放，可以在CSS中使用@media查詢。以下是一個例子： ``` @media only screen and (max-width: 600px) { body { zoom: 60%; -moz-transform: scale(0.6); -moz-transform-origin: 0 0; -o-transform: scale(0.6); -o-transform-origin: 0 0; -webkit-transform: scale(0.6); -webkit-transform-origin: 0 0; } } ``` 在這個例子中，使用`@media`查詢來檢測窗口寬度是否小于或等于600像素。如果是，則將頁面縮放比例調整為60%。 總之，通過使用CSS的縮放屬性和@media查詢，可以輕松地控制頁面的縮放。這對于優化網站在不同設備上的顯示非常重要。