如何應用媒體查詢？

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

你應該做一個鏈接標記的CSS，並有這個元標記 和你

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

沒有任何意義，因爲你會選擇一個畫面，是小於300像素寬度

@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"/> 

Answer 2

做媒體查詢的方式是這樣的：

/* 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); 
    } 
} 

當然，改變你想要的斷點的條件。 作爲指導原則，請始終將您的媒體查詢應用到元素的元素/邏輯部分的樣式之後。這使得以後可以方便地在所有分辨率中查找和編輯特定元素的樣式。

幾件事要注意，第一次出國：

• 確保您使用的是沒有在媒體查詢重疊的像素值。
• 媒體查詢中的規則將「覆蓋」它們之外的規則。