CSS 页面缩放 - 响应式网页设计技巧

实现页面缩放的方法有很多种，以下是其中的一种方式：

1. 使用 viewport meta 标签

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>

其中，width=device-width表示宽度自适应设备宽度，initial-scale=1.0表示初始缩放比例为1，maximum-scale=1.0表示最大缩放比例为1，user-scalable=no表示禁止用户手动缩放。

2. 使用@media查询

@media only screen and (max-width: 768px) {
  /* 在屏幕宽度小于等于768px时执行以下样式 */
  body {
    font-size: 16px;
  }
}

@media only screen and (max-width: 480px) {
  /* 在屏幕宽度小于等于480px时执行以下样式 */
  body {
    font-size: 14px;
  }
}

其中，max-width表示最大屏幕宽度，根据不同的屏幕宽度设定不同的字体大小等样式。

3. 使用rem单位

html {
  font-size: 16px;
}

@media only screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media only screen and (max-width: 480px) {
  html {
    font-size: 12px;
  }
}

body {
  font-size: 1rem;
}

其中，html元素的font-size设定为16px，根据不同的屏幕宽度设定不同的html字体大小，body元素的字体大小使用rem单位，根据html元素的字体大小进行缩放。

以上是一些常用的方法，具体实现可根据需求选择合适的方法。