当我将屏幕调整为小于 600 像素时，媒体查询不起作用

Posted 2023-03-06

【中文标题】当我将屏幕调整为小于 600 像素时，媒体查询不起作用

【英文标题】：Media query doesn't work when i resize screen less than 600px

【发布时间】：2018-03-20 00:37:03

【问题描述】：

我在一个部门下制作了一个表格，并在屏幕尺寸小于 600 像素时使用媒体查询将其响应为响应式。但是当我将窗口的大小调整为小于 600 像素时，表格数据下的所有内容都来自该部门。 这是我的问题的屏幕截图：

这是我用来制作这张表的代码：

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

【参考方案1】：

使用@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>

【讨论】：

它仍然没有完全修复。谢谢您的帮助。您有部门响应，但内容仍然超出部门。看这里...postimg.org/image/51wq7jun3

感谢接受。我建议使用著名的接口页面，例如 Bootstrap