如何申请媒体查询？

Question

我已经使用HTML和CSS创建了一个站点。 该网站目前没有响应，我需要更改为响应网站。 我使用了媒体查询，但似乎无法正常工作。 我的代码中有任何错误吗？ 我已将媒体查询应用于整个CSS。 我应该将媒体查询应用于整个CSS还是仅应用于CSS的特定部分？

我尝试使用媒体查询@media screen and (max-width: 300px) { } ，并且在调整浏览器大小时可以使用，但是此后，当浏览器再次最大化时，桌面样式不再适用。

@media screen and (max-width: 300px) {
  body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #fff;
    margin: 0;
    /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center;
  }
  .thrColElsHdr #container {
    width: 800px;
    background: #FFFFFF;
    margin: 0 auto;
    /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left;
    /* this overrides the text-align:
center on the body element. */
    margin-bottom: 0px;
  }
  .thrColElsHdr #header {
    background: #DDDDDD;
    padding: 0 10px;
    /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead
of text, you may want to remove the padding. */
    background-image: url(images/top.png);
    height: 160px;
  }
  #top_menu {
    color: #e5e491;
    font-size: 15px;
    text-decoration: none;
    height: -20px;
    width: auto;
    float: right;
    margin: 90px 0 -50px 0;
  }
  #top_login {
    color: #e5e491;
    font-size: 10px;
    text-decoration: none;
    float: right;
    text-align: right;
    margin: 0px 0 0px 0;
    width: 600px;
    height: 30px;
    position: relative;
    top: -160px;
  }
  .thrColElsHdr #header h1 {
    margin: 0;
    /* zeroing the margin of the last element in
the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 0px 0;
    /* using padding instead of margin will allow you to
keep the element away from the edges of the div */
    color: #FFF;
    font-family: "Times New Roman", Times, serif;
    height: 160px;
  }
  .thrColElsHdr #sidebar1 {
    float: left;
    width: 16em;
    /* since this element is floated, a width must be given */
    background: #75b808;
    /* top and bottom padding create visual space within this div */
    margin: 15px 10px 15px 15px;
    background-image: url(images/news_top.png);
    background-repeat: no-repeat;
    padding: 15px 2px 2px 2px;
    font-size: 10px;
  }
  .thrColElsHdr #sidebar2 {
    float: right;
    width: 17em;
    /* since this element is floated, a width must be given */
    background: #EBEBEB;
    /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 10px 0;
    /* top and bottom padding create visual
space within this div */
    border: #0a4b67;
    border-width: thick;
    margin: 5px;
    font-size: 10px;
  }
  .thrColElsHdr #sidebar1 h3,
  .thrColElsHdr #sidebar1 p,
  .thrColElsHdr #sidebar2 p,
  .thrColElsHdr #sidebar2 h3 {
    margin-left: 10px;
    /* the left and right margin
should be given to every element that will be placed in the side columns */
    margin-right: 10px;
  }
  .thrColElsHdr #mainContent {
    margin: 0 12em 0 1em;
    /* the right margin can be given in ems or pixels. It creates the space down the right side of the page.
*/
    color: #0a4b67;
  }
  .thrColElsHdr #mainContent h2 h3 h4 {
    color: #0a4b67;
  }
  .thrColElsHdr #footer {
    padding: 0 10px;
    /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background: #E1E994;
  }
  .thrColElsHdr #line {
    padding: 0 10px;
    /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background: #E1E994;
    margin-top: 0px;
  }
  .thrColElsHdr #footer p {
    margin: 0;
    /* zeroing the margins of the first element in the footer will
avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0;
    /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
  }
  /* Miscellaneous classes for reuse */
  .fltrt {
    /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
  }
  .fltlft {
    /* this class can be used to float an element left in your
page */
    float: left;
    margin-right: 8px;
  }
  .clearfloat {
    /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
  }
  .thrColElsHdr #container #header #top_menu_logo {
    margin-top: 0em;
    margin-right: 0em;
    margin-bottom: 0em;
    margin-left: 0em;
    float: left;
  }
  .thrColElsHdr #container #header #top_menu a {
    color: #e5e491;
  }
  .thrColElsHdr #container #subheading {
    font-size: 14px;
    height: 211px;
  }
  div#nifty {
    font-size: 12px;
    background: #2d6482;
    width: 300px;
  }
  div.rounded div {
    height: 1px;
    overflow: hidden;
  }
  #radiusx,
  #radiusy {
    text-align: right;
    width: 20px;
  }
  div#nifty p {
    color: #dfe791;
    padding: 2px;
    margin: 2px;
  }
  #thetext {
    float: right;
    width: 380px;
    padding: 10px;
    font-size: 12px;
    font-weight: bold;
  }
  #theimg {
    float: left;
    width: 400px;
  }
}
</style>




please any idea any mistake  please comment my question ?

Answer 1

进行媒体查询的方法是：

/* rules that apply regardless of resolution */
.some > .css > .selector {
    display: block;
    background-color: rgb(255, 255, 255);
}

@media screen and (min-width: 1440px) {
    /* rules that apply for screens >= 1440px */
    .some > .css > .selector {
        width: 1280px;
        color: rgb(144, 144, 144);
    }
}
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    /* rules that apply for screens 1024px - 1439px */
    .some > .css > .selector {
        width: 920px;
        color: rgb(102, 102, 102);
    }
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
    /* rules that apply for screens 640px - 1023px */
    .some > .css > .selector {
        width: 500px;
        color: rgb(64, 64, 64);
    }
}
@media screen and (max-width: 639px) {
    /* rules that apply for screens 639px and below */
    .some > .css > .selector {
        width: 300px;
        color: rgb(0, 0, 0);
    }
}

当然，请用所需的断点更改条件。 原则上，请始终在该元素/元素的逻辑部分的样式之后应用媒体查询。 这使以后在所有分辨率下查找和编辑特定元素的样式变得很方便。

初学者需要注意的几件事：

• 确保您使用在媒体查询中不重叠的px值。
• 媒体查询中的规则将“覆盖”其中的规则。

Answer 2

您应该为CSS做一个链接标签，并拥有此meta标签和

@media screen and (max-width: 300px) {}

没有任何意义，因为您将选择宽度小于300px的屏幕

@media screen and (min-width: 300px) and (max-width: 460px) {}

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>