如何快速检查不同浏览器尺寸的布局？

Question

在编写HTML + CSS并查看Chrome中的结果后，我经常走得太远，我拖动窗口的一角查看其他尺寸和长宽比的外观。

我可以右键单击，选择inspect，单击Toggle device toolbar，然后为手机选择一些尺寸。

但是，这甚至比拖动浏览器的角点效果更差，而且我想为某人提供一个视图，该人的浏览器比我的桌面上的浏览器拥有的宽大尺寸更接近适度的1024x768。

如何快速检查不同浏览器尺寸的布局？

具体而言，这是MWE。几次按键，如何确定背景颜色确实发生了变化（无需调整浏览器窗口的大小）？

html {
  background-color: #eee;
}

@media only screen and (max-width: 1023px) {
  html {
    background-color: #ccc;
  }
}

@media only screen and (max-width: 767px) {
  html {
    background-color: #aaa;
  }
}