将 flex 语法应用于带有移动视图屏幕的表时出错答案

【问题标题】：Errors to apply flex syntax to table with mobile view screen将 flex 语法应用于带有移动视图屏幕的表时出错
【发布时间】：2018-09-09 07:09:17
【问题描述】：

我正在尝试将 flex-css 应用于表格，以便它可以根据屏幕尺寸的变化做出响应。但是在手机尺寸的屏幕上测试时，它并不能很好地适应。

这是我的代码，

<mat-card fxLayout="column" 
           fxLayout.xs="column" 
          >
<div class="link"><a href="localhost:4201/" target="_blank">Go To Application</a></div>
<div>
<h3 ><strong>Welcome To Rockefeller </strong></h3>
    <p> Please Choose proper option to manage Organization .Navigation options will become available after doing so.</p>

</div>
<div  class="table" fxFlex="2 2 calc(10em + 10px)">
<table>


                    <tr>
                    <td >
                        <button class="entrInstbtn" mat-raised-button color="primary" (click)="openDialogModifyOrg()" >Modify Organization Attributes</button>

                    </td>
                    </tr>

                    <tr>
                    <td >
                        <button class="entrInstbtn" mat-raised-button color="primary" (click)="deleteOrg()" >Delete Organization</button>

                    </td>
                    </tr>

                    <tr>
                    <td><button class="anchorelement" mat-raised-button color="primary" (click)="openDialogForAddUser()">Add User</button>
                    </td>
                    </tr>   

                    <tr>        
                            <td><button class="anchorelement" mat-raised-button color="primary" (click)="openDialogViewUser()">View/Edit User Information</button>
                    </td>
                    </tr>

                    <tr>                
                    <td >
                        <button class="entrInstbtn" mat-raised-button color="primary" (click)="openDialogUploadData()">Upload Data</button>

                    </td>
                    </tr>
</table>
</div>
</mat-card>

这是 CSS，我正在使用它，

       mat-card{
    width:auto;
    height:550px;
    margin: 20px 20px 20px 20px;
    font-family: Verdana, sans-serif;
    display:flex;
    flex-direction: column;
}
p{
    font-family: Verdana, sans-serif;
    font-size:12px;
    line-spacing:1px;
    color:#0c0c28;
}


h3{
    font-size:16px;
    font-family: Verdana, sans-serif;
}

.entrInstbtn{

    font-family: Verdana, sans-serif;
}
.anchorelement{
    color:white;
    font-family: Verdana, sans-serif;
}

strong, mat-form-field, mat-select{
    color:#0c0c28;
    font-size:13px;
    font-family: Verdana, sans-serif;
}
.link{
    float:right;
    color:#0c0c28;
    font-size:13px;
    font-family: Verdana, sans-serif;
    font-weight:bold;
    margin-right:0;
    margin-left:85%;
}

.mat-raised-button{
    width:50%;
    border-radius:15px;
    margin-top:20px;
    margin-left:65%;
    color:white;
    font-weight:bold;
    font-size:11px;
}

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

    .mat-raised-button{
        font-weight:bold;
        font-size:9px;
        width:90%;
        margin-left:0%;
    }

    .link{
        margin-left:45%;
    }
}

@media screen and (min-width:401px) and (max-width:600px){

    .mat-raised-button{
        font-weight:bold;
        font-size:10px;
        width:75%;
        margin-left:20%;
    }
}

@media screen and (min-width:601px and max-width:900px){

    .mat-raised-button{
        font-weight:bold;
        font-size:11px;
        width:45%;
        margin-left:15%;
    }
}

这是桌面视图中的快照，

这是移动视图中的快照，

请任何人帮助解决此问题。

【问题讨论】：

我没有看到您发布的代码有问题，但样式和内容与您发布的屏幕截图不同。您能否为您的页面发布完整的 HTML/CSS，以便我们重现您的屏幕截图中显示的问题？
看..现在我已经编辑了我的整个代码。

标签： angular responsive-design angular-flex-layout

【解决方案1】：

带有您的代码的 codepen 对我来说看起来不错：
https://codepen.io/panchroma/pen/JLLMbq

您可能忘记在文档头部添加视口元标记

<head>  
...  
<meta name="viewport" content="width=device-width, initial-scale=1">
...  
</head>

还是与浏览器有关？

如果您还没有这样做，请使用其他浏览器检查。浏览器对 flexbox 的支持很好，除了 IE
https://caniuse.com/#feat=flexbox

或者，如果您可以共享页面的 URL，那也可能会有所帮助。

【讨论】：