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获取屏幕分辨率的高度

回答

相关问题