屏幕宽度问题与内容和条件

Question

欢迎，我对screen.width条件有简单的问题。 这是我的html代码：

 <ul class="offer-image clearfix">
            <li>
                <figure class="figure-image bottom-left" >
                    <div id="fire">
                        <h3> lighting a fire!</h3>
                        -We Light a fire on evening<br>
                        -We are using only real wood<br>
                        -You will find the best pleaces for bonfire<br>
                    </div>
                    <img src="resources/img/fire-min.jpg" >
                </figure>
            </li>

我想更改fire div中的内容，所以我使用了javascript：

if (screen.width > 650) {
 document.getElementById("fire").innerHTML = "<h3> lighting a fire!</h3>";

} else if (screen.width < 650) {
    document.getElementById("fire").innerHTML = "<h3> lighting a fire!</h3>-We Light a fire on evening<br> -We are using only real wood<br>-You will find the best pleaces for bonfire<br>";
}

主要问题应该很简单。 当我刷新页面时，内容从document.getElementById("fire").innerHTML并且如果screen.width大于650的情况下，其他内容都不会更改。有人可以解释一下为什么它不显示工作？

Answer 1

screen.width返回用户屏幕的总宽度（以像素为单位），因此不会改变。 在您的情况下，应改为window.innerWidth 。

Answer 2

使用window.innerWidth而不是screen.width ，第一个给您当前的宽度，第二个给您原始的屏幕宽度。此外， window.innerWidth是静态值，因此在屏幕宽度不变的情况下，您可以使内容保持动态不断使用onresize侦听器进行更改，如下所示：

        window.onresize = function(){
            if (window.innerWidth > 650) {
                document.getElementById("fire").innerHTML = "<h3> lighting a fire! grater than 650</h3>";

            } else if (window.innerWidth <= 650) {
                document.getElementById("fire").innerHTML = "<h3> lighting a fire! less than 650 </h3>-We Light a fire on evening<br> -We are using only real wood<br>-You will find the best pleaces for bonfire<br>";
            }
        }