[英]Media query doesn't work when i resize screen less than 600px
I have made a table under a division and used the media query to react it as responsive when screen size goes less than 600px. 当屏幕尺寸小于600px时,我已在一个分区下创建了一个表格,并使用媒体查询对其进行了响应。 But when I resize my windows less than 600px all the content under table data is come out of the division. 但是,当我将窗口的大小调整为小于600px时,表数据下的所有内容都来自该分区。 Here is the screenshot of my problem: 这是我的问题的屏幕截图:
And here is my code that I have used to make this table: 这是我用来制作此表的代码:
<div class="myfirst">
<h1 class="myheading">About Us</h1>
<table>
<tr>
<td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
<td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
<td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td>
</tr>
</table>
</div>
<style>
.myfirst {
width: 100%;
height: 200px;
background-color: aqua;
margin-top: 0;
}
.myheading {
margin-top: 0px;
text-align: center;
font-family: sans-serif;
}
table {
color: black;
padding: 25px 196px;
font-weight: 30;
margin-left: 75px;
}
tr {
width: 318px;
height: 29px;
}
td {
border-right: 2px solid white;
padding: 0 32px;
}
td:last-child {
border: none;
}
@media screen and(max-width:600px) {
.myfirst {
width: 100%!important;
height: 200%;
background-color: aqua;
margin-top: 0;
}
table,td,tr,span {
float: left;
clear: both;
width: 100%;
display: block;
margin: 0px;
padding: 0;
}
</style>
use @media screen and (max-width:600px)
Add a space between and
and (max-width:600px)
使用@media screen and (max-width:600px)
在and
和(max-width:600px)
之间添加一个空格
.myfirst { width: 100%; height: 200px; background-color: aqua; margin-top: 0; } .myheading { margin-top: 0px; text-align: center; font-family: sans-serif; } table { color: black; padding: 25px 196px; font-weight: 30; margin-left: 75px; } tr { width: 318px; height: 29px; } td { border-right: 2px solid white; padding: 0 32px; } td:last-child { border: none; } @media screen and (max-width: 800px) { table,td,tr,span { margin-left: 0px!important; padding: 0; } } @media screen and (max-width: 600px) { .myfirst { width: 100%!important; height: 200%; background-color: aqua; margin-top: 0; } table,td,tr,span { float: left; clear: both; width: 100%; display: block; margin-left: 0px!important; padding: 0; } }
<div class="myfirst"> <h1 class="myheading">About Us</h1> <table> <tr> <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td> <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td> <td><span>HOSTING</span><br>We have top class servers<br>to serve you what you need.</td> </tr> </table> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.