在 HTML 头中使用 @media 样式答案

【问题标题】：Using @media style in HTML head在 HTML 头中使用 @media 样式
【发布时间】：2017-05-25 17:50:21
【问题描述】：

我是 html 新手，出于好奇，我只是创建了一个测试网页。我正在努力做到这一点，以便当我的浏览器窗口宽度小于 800 像素时，我的 div 占据了屏幕的整个宽度。否则它们应该占据其中的 45% 并且是内联块。我使用了下面的代码。无论我的窗口大小如何，它们都是 45% 宽度的内联块。我只是错误地使用了@media 标签吗？如果可能，我想在 html 代码的头部定义样式。

<!DOCTYPE html>

<html>
    <head>
        <title> Page</title>
        <style type="text/css"> @media screen and (max-width: 800px) { div { 
width: 100%}} div {display: inline-block; width: 45%; height: 50px; 
background-color: purple} </style>
    </head>

    <body>
        <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
    </body>
</html>

谢谢

【问题讨论】：

标签： html

【解决方案1】：

顺序/位置很重要（从上到下）

你代码的问题，你检查一下屏幕，如果小于800px你设置为100%，那么你把宽度改写成45%，一直都是45%。

考虑一下你先将宽度设置为 45%，然后如果屏幕尺寸小于 800 像素，则将其覆盖为 100%（注意：所有其他 CSS 规则仍然相同，除非你在 @media div 内部覆盖）

<!DOCTYPE html>

<html>

  <head>
    <title> Page</title>
    <style type="text/css">
      div {
        display: inline-block;
        width: 45%;
        height: 50px;
        background-color: purple
      }
      
      @media screen and (max-width: 800px) {
        div {
          width: 100%
        }
      }

    </style>
  </head>

  <body>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
  </body>

</html>

【讨论】：

啊，万岁，谢谢。好的下一个问题，为什么当我检查页面并使用 chrome 的设备模拟器时它不起作用，但是当我手动缩小浏览器窗口的大小时它起作用了？
@AronDuncanstein 很好，如果您正在寻找答案，请将其标记为Correct answer，以供未来的读者阅读。谢谢！