css獲取屏幕分辨率的高度

即時通訊由於我的屏幕分辨率是1920x1080而難以獲得較低屏幕分辨率的高度沒有人知道如何獲得高度和寬度屏幕分辨率？，因爲我的朋友在他的電腦中檢查我的作品時有1024x768分辨率，這一切都搞砸了，這是我唯一遇到的CSS高度和寬度問題。css獲取屏幕分辨率的高度

來源

2012-07-17 FishBowlGuy

退房媒體查詢http://www.w3.org/TR/css3-mediaqueries/ – Musa 2012-07-17 05:08:13

我一直在尋找其他一天同樣的事情，偶然發現了這有趣的一篇文章： http://mislav.uniqpath.com/2010/04/targeted-css/ – Jules 2012-07-17 05:13:51

無法從CSS獲取屏幕的高度。但是，使用CSS3以後，您可以使用media queries來控制按照分辨率顯示模板。

如果您想使用媒體查詢以高度爲基礎進行編碼，您可以定義樣式表並像這樣調用它。

<link rel="stylesheet" media="screen and (device-height: 600px)" />

來源

2012-07-17 05:14:16 Starx

感謝您的幫助：D – FishBowlGuy 2012-07-17 05:20:47

爲了獲得屏幕分辨率，您還可以使用jquery。這link幫助你非常解決。

來源

2012-07-17 05:13:01 zhilevan

-5

以百分比表示使用高度和寬度。

例如：

width: 80%; 
height: 80%;

來源

2012-07-17 06:04:18

百分比僅適用於parrent el最大高度/寬度。 – BladeMight 2016-12-29 00:24:43

你可以使用視窗百分比lenghts。

請參見：http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

它的工作原理是這樣的：

.element{ 
    height: 100vh; /* For 100% screen height */ 
    width: 100vw; /* For 100% screen width */ 
}

更多信息也可通過Mozilla Developer Network和W3C。

來源

2015-01-09 18:57:23

你可以發佈鏈接的內容嗎？最好不要發佈鏈接，因爲它可能是未來的死鏈接 – Chris 2015-01-09 19:01:33

正是我所需要的。（y） – 2015-10-31 03:06:04

這種方法唯一的問題是移動設備中的vh包括地址欄，這使得很難指望固定的全高元素。 – Roshdy 2017-07-31 08:15:36

要獲得屏幕分辨率，請使用Javascript代替CSS：使用screen.height代表高度，使用screen.width代表寬度。

來源

2015-01-09 19:16:47

實際上，您並不需要屏幕分辨率，所需的是瀏覽器的尺寸，因爲在很多情況下瀏覽器都是窗口化的，即使尺寸最大化，瀏覽器也不會佔用屏幕的100％。

你想要的是查看端口高度和查看端口寬度：

<div style="height: 50vh;width: 25vw"></div>

這將呈現一個div內瀏覽器的高度的50％和寬度的25％。

（說實話這個答案是什麼@Hendrik_Eichler想說的一部分，但他只給了一個鏈接，並沒有直接解決這個問題）

來源

2015-12-29 07:07:06

可以綁定屏幕的當前高度和寬度到CSS的變量：var(--screen-x)和var(--screen-y)與此javascript：

var root = document.documentElement; 

document.addEventListener('resize',() => { 
    root.style.setProperty('--screen-x', window.screenX) 
    root.style.setProperty('--screen-y', window.screenY) 
})

這是直接改編自利·貝羅的例子在她的談話對CSS變量在這裏：https://leaverou.github.io/css-variables/#slide31

來源

2016-12-27 17:58:04

你可以得到風在純CSS中很容易使用單位「vh」，每個單位對應窗口高度的1％。在下面的例子中，讓我們開始通過添加頁面大小的一半大小來集中block.foo。

.foo{ 
    margin-top: 50vh; 
}

但這隻適用於'窗口'的大小。隨着JavaScript的輕拍，你可以使它更多功能。

$(':root').css("--windowHeight", $(window).height());

該代碼將創建一個名爲「--windowHeight」的CSS變量，該變量帶有窗口的高度。要使用它，只需添加規則：

.foo{ 
    margin-top: calc(var(--windowHeight)/2); 
}

爲什麼它比單純使用「VH」單位更靈活？因爲你可以獲得任何元素的高度。現在，如果你想在任何container.bar集中一個block.foo，你可以：

$(':root').css("--containerHeight", $(.bar).height()); 
$(':root').css("--blockHeight", $(.foo).height()); 

.foo{ 
    margin-top: calc(var(--containerHeight)/2 - var(--blockHeight)/2); 
}

最後，它要對窗口大小的變化做出反應，您可以使用（在這個例子中，容器50％的窗口高度）：

$(window).resize(function() { 
    $(':root').css("--containerHeight", $(.bar).height()*0.5); 
});

來源

2018-03-01 12:27:58

css獲取屏幕分辨率的高度

回答

相關問題