html - 如何将浏览器屏幕尺寸更改为自定义尺寸？

Question

您好，我正在使用媒体查询开发响应式网页。

在这里，我需要检查许多设备，例如具有不同最小和最大宽度的智能手机、平板电脑。

例如:

/* Smartphones (portrait and landscape) ----------- */
   @media only screen 
   and (min-device-width : 320px) 
   and (max-device-width : 480px) {
    /* Styles */
       }

  /* Desktops and laptops ----------- */
   @media only screen 
   and (min-width : 1224px) {
     /* Styles */
    }

如您所见，我需要检查不同的宽度。

所以我正在寻找的是，我能否在浏览器中找到任何可以自定义最小和最大宽度的选项，这样我就可以将我的设计置于该宽度并根据我的需要进行排列？

Answer 1

使用 Chrome，你可以在检查元素下 ctrl+shift+I然后在右下角的齿轮按钮上，在 ovverides 菜单下，您可以启用许多测试值，从设备指标到 css 媒体(屏幕、打印)的模拟等等。

link to explanation on google.