Question

我是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>

由于

Answer 1

订单/职位重要（从上到下）

代码中出现问题，检查屏幕，如果设置为100％，则设置为100％，然后将宽度覆盖为45％，总是45％。

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

＆＃13;

<!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>

＆＃13;

在HTML头中使用@media样式

1 个答案:

订单/职位重要（从上到下）