让我的专栏对所有手机屏幕都具有移动响应性？答案

【问题标题】：Making my columns mobile responsive for all phone screens?让我的专栏对所有手机屏幕都具有移动响应性？
【发布时间】：2020-07-25 06:19:09
【问题描述】：

我最近对技能部分中的容器和列进行了更改。当我在我的 I-phone XR 上查看网站时，容器和列都被压扁了。它最初不是这样的，但我确实做了改变，现在如果它在任何宽度上查看：高于 375px 它只是被压扁而不是堆叠在一起。How it looks on my phone. This is how I wanted to look at higher mobile Widths.

 #skills {
        
      
      justify-content: space-around;
      height: 30vh;
       min-height: 70vh;
       
       background: #090a0f; 
       
    }

    #skills h2{
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        padding-top: 30px;
        color: #090a0f;
        font-weight: bold;
    }

    #skills h6 {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #6666ff;
        font-weight: bold;
    }

    #skills p {
        font-size: 16px;
        font-family: 'Ubuntu';
        font-weight: 300;
    }

    #skills .content-wrap .container {
        max-width: 1200px;
        /* height: 0vh !important; */
        min-height: 80vh;
        text-align: center;
        background: #fff;
        border-radius: 20px;
        height: 75vh;
        box-shadow: 0px 10px 30px rgba(57,56, 61, 0.205);
        display: flex;
        /* -webkit-box-flex: 1;
        flex-grow: 1; */
        
    }

    #skills .container .column {
       
        display: block;
        padding-left: 15px;
        padding-right: 15px;
        flex-basis: 33%;
        border-bottom: 0px solid #e2e2e2;
        border-right: 1px solid #e2e2e2;
        /* margin-left: 10px;
        margin-right: 10px; */
    }

    #skills .container .column:last-child {
        border-right: none;
        border-bottom: none;
    }

    #skills .container .column #skills-icon{
        margin: 20px 20px;
        font-size: 35px;
        color: #6666ff;

  
    }

    #skills .container .card p {
        font-family: 'Ubuntu';
    }

【问题讨论】：

标签： html css mobile flexbox grid

【解决方案1】：

@media screen css 规则正是针对这个问题，而且使用起来非常简单：只需定义您的 html 元素应如何与设备的屏幕尺寸相关联。

【讨论】：

我已经尝试过媒体查询，但是当我设置原始媒体查询一切正常时，这并没有解决这个特定问题，发现我对技能容器的长度进行了一些更改，那是它开始的时候搞砸了。