html – 如何获取CSS中的当前屏幕宽度？

当屏幕宽度小于480px时,我使用以下CSS代码进行格式化,并且它运行良好.

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

我想得到当前的计算宽度使用缩放,如下所示：

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
        zoom: (current screen width)/(480);
    }
}

解决方法

使用CSS3视口百分比功能.

Viewport-Percentage Explanation

假设您希望主体宽度大小为浏览器视图端口的比率.我添加了一个边框,这样您就可以在更改浏览器宽度或高度时看到正文调整大小.我使用了视口大小的90％的比例.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Styles</title>

    <style>
        @media screen and (min-width: 480px) {
            body {
                background-color: skyblue;
                width: 90vw;
                height: 90vh;
                border: groove black;
            }

            div#main {
                font-size: 3vw;
            }
        }
    </style>

</head>
<body>
    <div id="main">
        Viewport-Percentage Test
    </div>
</body>
</html>

html – 如何获取CSS中的当前屏幕宽度？

解决方法

相关文章