css实现缩放自适应网页--手机web

要实现缩放自适应网页，可以通过以下几种方式：

1. 使用viewport

在HTML头部添加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个meta标签告诉浏览器，让页面的宽度等于设备的宽度，并且初始缩放比例为1。

2. 使用CSS media query

可以使用CSS media query，根据不同的屏幕大小设置不同的样式，例如：

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

@media screen and (min-width: 769px) {
  /* 在屏幕宽度大于等于769px时生效的样式 */
  body {
    font-size: 18px;
  }
}

这样就可以根据不同的屏幕大小设置不同的字体大小、布局等样式。

3. 使用rem单位

rem单位是相对于根元素（即html元素）的字体大小来计算的单位。可以将根元素的字体大小设置为屏幕宽度的比例，例如：

html {
  font-size: calc(100vw / 7.5);
}

这样就可以将根元素的字体大小设置为屏幕宽度的1/7.5，即1rem等于屏幕宽度的1/7.5。然后可以使用rem单位来设置其他元素的大小和间距，例如：

h1 {
  font-size: 2rem;
}

p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

这样就可以根据屏幕宽度自适应地设置各个元素的大小和间距了。