使用 css 将 css 属性设置为屏幕宽度答案

【问题标题】：Set a css property to screen width using css使用 css 将 css 属性设置为屏幕宽度
【发布时间】：2016-04-17 02:23:23
【问题描述】：

有没有办法将css属性设置为屏幕宽度？

我想要达到的目标接近于：

div{width: screen width; }

或者

.divTest{width: screen width; }

编辑 1：我想使用该类来精确调整具有当前宽度的其他元素的大小，就像我使用 css 选择的那样。

编辑 2：我不相信没有某种脚本就可以完成，但我知道什么。

编辑 3：最后的想法 Alex V's answer 中有一篇关于使用 JavaScript 调整寡妇脚本大小的帖子。您只需添加您想要的脚本风格。在我的情况下，它将设置一个类属性。但是，我认为使用 JavaScript 设置视觉属性在某些用途中可能是不好的做法/不受欢迎。

【问题讨论】：

width:100%; 有帮助吗？
如果不是，那你可以试试width: 100vw;
我想要一个确切的数字。使用@media screen，我可以将其设置为设置大小，但如果可能的话，我希望它准确。
你是说你想根据 div 的大小来调整其他元素的大小，假设你的屏幕宽度等于你的屏幕宽度？换句话说，您希望所有其他元素与屏幕宽度成正比？
假设对于一个子 div，您希望它的宽度为根 div === 屏幕尺寸的 50% 和 25% 高度。 width: 50vw; 和 height: 25vh 如何不适合您？这些单位基于屏幕视口尺寸。

标签： html css

【解决方案1】：

试试width: 100vw; 或上述评论建议的width: 100%;。

如果适用，您可能还想在 HTML 中设置元标记：

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

如果 <div> 不适合 100% 的屏幕宽度，也许您需要重置默认边距/填充：

*, :before, :after {
    box-sizing: border-box; // habit
    margin: 0;
    padding: 0;
}

【讨论】：

你们说的很对。当出现问题时，%100 无法正常工作。这个和其他一些原因我想传递类或影响包含确切当前屏幕宽度的整个标签。当然，这样做很有效。
一个 div 低于 %100 但它不是 Q 的范围。
您是否摆脱了 CSS 中的默认边距/填充？我将编辑我的帖子以说明我的意思。
它超出了这个问题，但我做到了。我确实相信动态内容存在错误，但在我提出这个问题之前我需要做更多的研究。
100vw 确实在 100% 没有的地方工作。这不是我希望的确切答案，因为它很简单，但谢谢你，因为有时最好的答案是！它可以满足我的需要。事实证明，无法在 css 中设置类和属性。

【解决方案2】：

一般来说，如果一个 div 设置为 display:block（我相信这是大多数浏览器的默认设置），它会扩展到其父级的全宽。如果您希望它是屏幕的整个宽度，这实际上取决于您的页面配置方式。

如果 div 位于仅设置为 width:500px 或任何其他大小的另一个元素中，则 div 将仅是父元素的宽度。但是如果 div 的 parent 是 html body，那么它应该是整个屏幕的宽度。

我最近一直在研究 html 和 css，而我发现解决此类 CSS 问题的最佳工具是 Chrome 的开发人员工具。您实际上可以右键单击并“检查”您正在查看的 div。然后，您可以尝试所有不同的 CSS 设置，Chrome 会实时显示这些设置会产生什么效果。

【讨论】：

【解决方案3】：

CSS 的视口单位

vw, vh
1vw = 1% of viewport width
1vh = 1% of viewport height

【讨论】：