提问人：HMT 提问时间：11/14/2023 最后编辑：HMT 更新时间：11/15/2023 访问量：28
在 css 中按屏幕大小比例设置元素大小
Set element size proportionally to screen size in css
问：
我正在构建一个 react 应用程序，它旨在成为一个网站，但主要用于智能手机、平板电脑和其他设备。
为了确保布局美观，我将大小设置为：body
width: 360px;
height: 800px;
这在我的笔记本电脑浏览器和某些智能手机上看起来不错，但我真正想做的是将尺寸与屏幕尺寸成比例地设置，以允许 iPad 具有更大的尺寸。 基本上，我希望高度与屏幕尺寸成正比，宽度与高度成正比。
寻找如下代码：
height: screen.size() % 800
width: height *(360/800)
提前致谢
也 当我希望我的网站具有响应性时，最好使用 vh、vw、px、% 是什么？
答：
1赞
hellsing
11/15/2023
#1
尝试在 css 中调整视口宽度 （vw） 和视口高度 （vh） 的大小。如果设置：
height: 80vw; /* that is, 80% of the screen width */
width: 80vw; /* width is also 80% of the screen width */
...这样，您就不必在代码中进行额外的计算。使用这些 css 设置，您可以获得一个边宽为视口 80% 的正方形，例如。如果屏幕宽度为 360px，则为 288×288 像素）。
评论
1赞
HMT
11/15/2023
这奏效了，我把它改成了：width： 45vh;高度：100VH;谢谢！
评论