问题标签 [viewport-units]

是否可以使 DIV（设置为 width="40%"）随着视口（浏览器窗口）变窄而变宽？

我知道您也可以使用 40vw 而不是 40% 来在视口缩小时缩小 div，但我希望当视口变窄时 div 会变宽。

谢谢，艾迪

我正在寻找一个覆盖整个屏幕的覆盖。

我正在处理的网站没有响应，并且设置为 1000px 宽。我有元：

设置为加载站点，使其显示为 1000 像素宽，但使用设备视口作为 vh/vw 单元，以便我可以使用媒体查询和 javascript 来删除/初始化/不初始化某些功能。

问题是当像素比为 1:1 且未缩小时 100vh 等于视口，因此我的 100vh/vw 比物理视口小得多。

有没有办法在保持检测较小屏幕的能力的同时，无论缩放/缩放级别如何，都可以淹没视口？

正如@Benjamin Solum 所指出的，我应该补充一点，这个问题出现在移动浏览器上。

我正在尝试将图像设置为 phoneGap 应用程序上屏幕的全高。目前，我正在使用以下代码来确定屏幕“尺寸”，并且我正在使用 javascript 将图像分辨率设置为这些暗淡。

这会在 iPhone 6（视网膜显示屏）上产生所需的结果，并在我的笔记本电脑上进行渲染。问题是当我在我的 Galaxy Note-3 上尝试它时，图像非常大，原因如下：当我console.log(window.screen.availHeight);的 Note 似乎认为它的高度是1920像素时 - 而我的 iPhone 6 只有647（它是视网膜显示器） ，所以我知道 1920 不是实际的像素数（或者是吗？）。我查看了设备是如何获取它的window.screen.availHeight，发现有这个变量被调用window.devicePixelRatio，它在 Note 3 上的值是3。我认为 Note 3 的视口尺寸是 360x640，因此 devicePixelRatio 的3是有意义的。现在，让我感到困惑的是，当我console.log(window.devicePixelRatio);在我的 iPhone 6 上时，结果是2. 我尝试使用以下代码将图像高度设置为“availHeight”值的 1/3：

它在 Note 3 上效果很好（因为它将图像高度缩小到 360 - 应该是这样），但在 iPhone 上，将图像缩小到 324（或接近的值）意味着图像只出现在页面的一半以上高度。

我的问题是，不是除以 devicePixelRatio，而是我可以从设备获得另一个变量以确定缩小图像的比率？生成的比率在 iPhone 上应为1 ，在 Note 3 上应为1/3，以使图像正确显示在整个高度上。

非常感谢您！

我习惯在桌面上使用px，有时在em上使用（尽管我不知道为什么在开发响应式界面时最好使用 px）。

我现在关心的是：我应该使用px、视口单位(vh,vw) 还是在为移动设备开发时使用其他什么？

我正在开发一个灯箱，我想在 CSS 中尽可能多地做。我正在使用视口单元来使整个事物响应。不幸的是 IE（我已经在版本 11 中测试过）不能正确调整动态加载的图像的大小。

比较以下 jsfiddle 并调整浏览器的大小以了解我的意思。

静态图片

动态加载的图像

关于如何解决这个问题的任何想法？

我正在创建一个单页网站，每个部分占据整个视口的高度和宽度（100vw 和 100vw），对于移动屏幕，我使用媒体查询来调整高度以使内容适合，问题是，一个部分有表单，当用户输入输入时，页面向上滚动或有时向下滚动？

我不知道为什么会这样？

此表单的 HTML 为：

本节的 CSS 是：

这是网站本身的链接：http ://www.a1phantom.com/

视口高度通常返回一个整数值；但是我现在注意到它返回一个带 2 个小数点的值。

为什么/如何将视口单位四舍五入？

（此外，我没有调整浏览器窗口的大小——但 100vh 有时会返回 616px，有时会返回 616.36px）

如标题中所述，是否可以vw仅在 css 中计算没有滚动条的？

例如，我的屏幕宽度为1920px. vw回报1920px，太好了。但我的实际体宽只有1903px.

有没有办法让我1903px只用 css 检索值（不仅适用于 的直接子级body），还是我绝对需要 JavaScript？

我创建了一个从屏幕右侧进入的侧推菜单，但是我试图使其在较小的屏幕尺寸下可用。

为此，我首先给它一个min-height并使用overflow: auto;- 所以如果用户屏幕太小，他们会看到一个滚动。

但是，在测试中，菜单滚动似乎不允许您滚动到菜单底部。

CodePen： http ://codepen.io/gutterboy/pen/PPVjNO

HTML：

SCSS：

JS：

我在这里做错了什么？

有大量的响应式嵌入视频的解决方案，但我无法找到一个通过视口高度设置视频嵌入大小的解决方案。

我的页面上有三个元素：页眉、Youtube 嵌入和页脚。页眉和页脚设置为静态“高度：15vh；” 我需要我的 Youtube 嵌入为 70vh，并且宽度要保持 16:9 的纵横比而不会溢出。

重申一下，我不是在寻找任何通过宽度设置嵌入大小的解决方案（例如 padding-bottom: 56.25% 方法）。

有什么想法吗？

谢谢！

[编辑：这不是一个重复的问题。另一个问题中提供的解决方案是指 100% 宽度，而我正在寻找与指定的视口垂直高度 (70vh) 的比例来调整大小的宽度。]