css中改变屏幕分辨率函数

在 CSS 中，我们可以使用 media queries 来修改页面的样式，使其在不同分辨率下展现不同的效果。这个函数可以通过设置屏幕的宽度和高度来调整相应的 CSS 样式。

@media only screen and (min-width: 768px) {
    body {
        background-color: blue;
    }
}

@media only screen and (min-width: 1024px) {
    body {
        background-color: red;
    }
}

@media only screen and (min-width: 1366px) {
    body {
        background-color: green;
    }
} 

上面的代码演示了三个不同分辨率下的背景颜色。通过设置不同的分辨率，页面的背景颜色会随之改变。

我们也可以通过使用 viewport 属性来为不同的设备调整页面样式。这个属性是基于设备的宽度和高度来设置。

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

上面的代码将页面的大小设置为设备的宽度，并且初始缩放比例为 1。

在使用 CSS 时，我们需要强调的一点是，我们应该对不同分辨率下的页面样式进行测试，并且确保页面在所有不同尺寸的设备上都能正常展示。