css中手机端等比例缩放

CSS中手机端的等比例缩放是基于viewport来实现的。当我们在PC端打开网页时，浏览器会自动按照自己的默认设置来渲染页面，并且根据窗口大小来决定页面的显示大小，而在移动端则需要根据设备的屏幕大小来确定页面的显示大小。

/* 设置meta标签 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

上述meta标签中的content属性中的width=device-width表示让页面的宽度等于设备的宽度，initial-scale=1.0表示初始显示比例为1：1。

在设计响应式网页时，经常需要使用等比例缩放来适配不同屏幕大小的设备，也就是根据设备宽度的比例来缩放页面。在CSS中，可以通过设置“vw”单位来实现。vw单位是相对于视口宽度的单位，例如1vw表示视口宽度的1%，50vw表示视口宽度的50%。

/* 设置一个DIV元素的宽度为浏览器宽度的50% */
div {
  width: 50vw;
}

上述代码中的“50vw”表示DIV元素的宽度为视口宽度的50%。

总之，通过使用meta标签和设置vw单位，可以轻松地实现响应式网页的等比例缩放，让页面在不同大小的屏幕上都能得到合适的显示。