检测屏幕大小的脚本，并根据屏幕大小更改css

Question

我得到了这个用于检测窗口大小的脚本 -

 function myFunction() { var w = window.innerWidth; var h = window.innerHeight; if (w = 768) { document.getElementById("container").style.height = "15.155em"; } else if (w = 1024) { document.getElementById("container").style.height = "25.155em"; } else if (w = 1366) { document.getElementById("container").style.height = "35.155em"; } }

 <body onload="myFunction()"> <div id="container" style="width:50px;border:2px solid black;"> </div> </body>

我想要发生的是，每次 div 的高度都会根据窗口的大小而改变。

现在发生了什么，在我运行网站的每个屏幕上都显示我好像屏幕大小是“768”

Answer 1

你不需要为此使用 javascript：它可以完全用 css 来完成。 你有几个选择（我现在能想到的）：

使用惊人的flexbox类（示例）
将元素本身和所有父元素的高度设置为 100%（尝试下面的代码段）
使用vh视口单位（1vh = 视口高度的 1%）

希望有帮助！

 html, body { margin: 0; padding: 0; height: 100% } div { width: 100px; height: 100%; background: red; }

 <div></div>

Answer 2

您可以使用 CSS 而不是使用 JS。 使用以下 CSS 使 DIV 适合屏幕的任何尺寸。

    #container
    {
    position: absolute;
    overflow-x: hidden;
    overflow-y:auto;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto; 
   }

您也可以使用height:100vh但旧浏览器不支持此单元。

谢谢

Answer 3

因为实际的浏览器宽度总是小于屏幕分辨率，并且您正在使用屏幕分辨率进行比较。

if (w = 768)
else if (w = 1024)
else if (w = 1366)

要么使用

if(w<768)
//do something
else if(w<1024)
//do something
else if(w<1366)
//do something
else
//default

或者更好的使用

screen.width
screen.height

如果你想使用 = 作为比较器。

Answer 4

你可以像这里一样使用 CSS 媒体查询

@media only screen and (min-width: 600px)
{
    .container
    {
        height: 15.155em;
    }
}

@media only screen and (min-width: 768px)
{
    .container
    {
        height: 25.155em;
    }
}

Answer 5

这是因为在要评估的 if 条件中应该是 == 而不是 =。 您使用的是赋值运算符而不是比较。

请更正以下代码

function myFunction()
{
    var w = window.innerWidth;
    var h = window.innerHeight;

    if (w == 768) {
        document.getElementById("container").style.height = "15.155em";
    } else if (w == 1024) {
        document.getElementById("container").style.height = "25.155em";
    } else if (w == 1366) {
        document.getElementById("container").style.height = "35.155em";
    }
}

正如其他成员所建议的那样，如果您希望使其具有响应性，则 mediaQueries 是一个不错的选择。

检测屏幕大小的脚本，并根据屏幕大小更改css

问题描述

5 个解决方案

解决方案1
1 2016-03-16 07:01:35

解决方案2
0 2016-03-16 06:57:04

解决方案3
0 2016-03-16 07:05:17

解决方案4
0 2016-03-16 07:16:57

解决方案5
0 2016-03-16 13:03:27

检测屏幕大小的脚本，并根据屏幕大小更改css

问题描述

5 个解决方案

解决方案1 1 2016-03-16 07:01:35

解决方案2 0 2016-03-16 06:57:04

解决方案3 0 2016-03-16 07:05:17

解决方案4 0 2016-03-16 07:16:57

解决方案5 0 2016-03-16 13:03:27

解决方案1
1 2016-03-16 07:01:35

解决方案2
0 2016-03-16 06:57:04

解决方案3
0 2016-03-16 07:05:17

解决方案4
0 2016-03-16 07:16:57

解决方案5
0 2016-03-16 13:03:27