我使用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 ?
答案 0 :(得分：0)
进行媒体查询的方法是：
/* 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);
}
}
当然，用你想要的断点改变条件。 作为指导原则，请始终在您的样式后面对元素的元素/逻辑部分应用媒体查询。这样可以方便以后查找和编辑所有分辨率中特定元素的样式。
首次注意的一些注意事项：
答案 1 :(得分：-1)
你应该为css做一个链接标记并拥有这个元标记 和你的
@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"/>