屏幕尺寸更改不会触发媒体查询

Question

我正在制作一个响应式页面，其中监视器的文本应为常规大小，而对于移动格式则应更大。 基本的东西。

我正在使用开发人员工具设备工具栏在Chrome浏览器中查看结果。

我创建了一个测试页面，该页面什么也不做，但是它不起作用。

无论我使用哪种设备（例如Galaxy S5），该段落的font-size固定为20px。

如果我不使用设备设置，而只是将其作为浏览器查看，它会很好地更改，但是就好像选择设备时，无论我将浏览器设置为什么大小，它都将完全忽略任何媒体查询。

我试过px vs. pt

我已经尝试过@ @media ，@ @media screen and ，@ @media all and等等。

显然，我缺少一些非常基本的东西，但是我很沮丧。

    <style>
        body {
            font-family: Arial;
            font-size: 20px;
        }

        @media all and (max-width: 900px) {
            body {
                font-size: 36px;
            }
        }
    </style>
  </head>
  <body>
<h1>h1 text</h1>
<p>Paragraph text</p>

Answer 1

为body定义字体大小很可能是不够的。 浏览器通常具有p ， h1 ， h2等标题元素和许多其他元素的内部默认规则（包括字体大小）。

因此，您应该为这些元素定义字体大小的规则，然后对它们进行媒体查询。