问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在 CSS 中获取当前屏幕宽度？

社区维基
1
新手上路，请多包涵

当屏幕宽度小于 480 像素时，我使用以下 CSS 代码进行格式化，效果很好。

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

我想获取当前宽度以供计算使用 zoom 如下所示：

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

原文由 mongmong seesee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 1.5k
1 个回答
得票最新
社区维基
1

使用 CSS3 视口百分比功能。

视口百分比解释

假设您希望主体宽度大小与浏览器的视口成比例。我添加了一个边框，这样您就可以在更改浏览器宽度或高度时看到正文调整大小。我使用了视口大小的 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>

原文由 Heather92065 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题