使用setTimeout与媒体查询连续处理不同屏幕分辨率

Question

我正在努力使我的网站响应。目前，我每100 of使用一次setTimeout来检查屏幕宽度，并相应地检查布局，而不是媒体查询。这是一个糟糕的方法，还是javascript能够处理这个问题，因为它是一个小网站？

function screen() {
    var screenWidth = window.innerWidth;
    if(screenWidth < 1100) {
        if(!sidebar.classList.contains('open'))
            sidebar.style.display = 'none';
        hamburger.style.display = 'flex';
    } else {
        sidebar.style.display = 'block';
        hamburger.style.display = 'none';
    }

    setTimeout(screen, 100);
}

screen();

Answer 1

让css引擎为您应用媒体查询是更易读、更高效的方法

但是如果您不能使用它，最好使用matchMedia

​

const sidebar = document.querySelector('nav')
const hamburger = document.querySelector('button')
const mql = matchMedia('(max-width: 1100px)')
handleChange(mql)
mql.addEventListener('change', handleChange)

function handleChange(e) {
  if (e.matches) {
    if (!sidebar.classList.contains('open'))
      sidebar.style.display = 'none';
    hamburger.style.display = 'flex';
  } else {
    sidebar.style.display = 'block';
    hamburger.style.display = 'none';
  }
}

<button>-</button>
<nav>test</nav>

​

Answer 2

使用setTimeout每100 is检查一次屏幕宽度并不是让任何网站响应的好方法。相反，您应该使用CSS中的媒体查询来指定您的网站应该如何查看不同的屏幕大小。这将允许浏览器自动调整您的网站布局时，屏幕大小的变化，而不需要不断轮询屏幕宽度使用JavaScript。使用媒体查询是使网站响应的更好方法，因为它比经常使用JavaScript轮询屏幕宽度更高效、更易于维护和更方便用户。

以下是您可以用来了解有关使用媒体查询使您的网站响应的更多信息的几个来源：

• 媒体查询上的media页面：查询
• 媒体查询的CSS-Tricks页面：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/