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

我用这个脚本来检测窗口的大小-

函数myFunction（）
{
var w=窗内宽度；
var h=窗内高度；
如果（w=768）{
document.getElementById（“容器”）.style.height=“15.155em”；
}否则如果（w=1024）{
document.getElementById（“容器”）.style.height=“25.155em”；
}否则，如果（w=1366）{
document.getElementById（“容器”）.style.height=“35.155em”；
}
}

---

您可以使用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

，但旧款浏览器不支持此装置

---

谢谢你，这不需要javascript：完全可以用css来完成。你有几个选择（我现在可以想到）：

使用惊人的类（）

将元素本身和所有父元素的高度设置为100%（请尝试下面的代码段）

使用视口单位（1vh=视口高度的1%）

希望有帮助

html，
身体{
保证金：0；
填充：0；
身高：100%
}
div{
宽度：100px；
身高：100%；
背景：红色；
}

---

因为实际的浏览器宽度总是小于屏幕分辨率， 和u使用屏幕分辨率进行比较

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

---

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

您可以使用CSS媒体查询，如

---

这是因为在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是一个很好的选择，以防您希望它具有响应性。

为什么不使用高度：100%？当然，您需要将身体设置为高度：100%才能完成此操作。你也可以使用@media规则：这是一个让它响应的问题使用css

height:100%或<代码>高度：100vh。@media规则集专门用于创建响应性布局jankapunkt您能提供一个链接到一些最有用的@media规则的网站吗？我检查了一堆，没有任何东西实际上没有高度，因为它没有显示任何东西
@media only screen and (min-width: 600px)
{
    .container
    {
        height: 15.155em;
    }
}

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

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";
    }
}