使用css將css屬性設置為屏幕寬度

Question

有沒有辦法將css屬性設置為屏幕寬度？

我想要實現的是接近這一點：

div{width: screen width; }

要么

.divTest{width: screen width; }

編輯1：我想使用該類來准確調整當前寬度的其他元素，因為我選擇了css。

編輯2：我不相信沒有某種腳本可以完成，但我知道什么。

編輯3：最后的想法關於使用JavaScript的寡婦重新調整大小腳本的帖子在Alex V的答案中。 你只需添加你想要的腳本風格。 在我的情況下，它將設置一個類屬性。 但是，我認為使用JavaScript設置視覺屬性在某些用途中可能是不好的做法/不合需要。

Answer 1

嘗試width: 100vw; 或者如上面的評論所示， width: 100%; 。

如果適用，您可能還想在HTML中設置元標記：

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

如果<div>不適合屏幕寬度的100％，可能需要重置默認的margin / padding：

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

Answer 2

通常，div，如果設置為display:block （這是大多數瀏覽器中的默認設置，我相信）將擴展到它的父級的全寬。 如果您希望它是屏幕的整個寬度，那實際上取決於頁面的配置方式。

如果div位於另一個僅設置為width:500px或任何其他大小的元素內，則div將只是父級的寬度。 但是如果div的父級是html主體，那么它應該是屏幕的整個寬度。

我最近在html和css上一直在喋喋不休，而且我發現找出像這樣的CSS問題的最好的工具是Chrome的開發者工具。 您實際上可以右鍵單擊並“檢查”您正在查看的div。 然后，您可以嘗試所需的所有不同的CSS設置，Chrome會實時向您顯示這些內容會產生什么影響。

Answer 3

CSS的視口單元

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