制作列表元素 (ul/li) Mobile Friendly/Responsive in HTML and CSS

Question

我们在桌面页脚附近有一个 "As Seen On" 新闻栏。在桌面上它可以正常工作并且徽标都集中在一条线上。但是，它对移动设备和移动设备都是一样的我需要将徽标堆叠起来而不是全部一行，这样您就不会在 phone 或平板电脑上一直向右滚动。

我不是 100% 确定，但我想我需要一个媒体查询，但我对格式化有点陌生 CSS。

HTML:

<div class="wrap">
  <h3><strong>We are fortunate to work with exceptional brands</strong></h3>
  <ul class="clients">
    <li><a href=""><img src="https://webslides.tv/static/images/logos/google.svg" alt="Google"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/airbnb.svg" alt="Airbnb"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/apple.svg" alt="Apple"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/microsoft.svg" alt="Microsoft"></a></li>
  </ul>
</div>

CSS:

.wrap {
  padding: 4.8rem;
  position:relative;
  width: 90%;
}
h3 {
  font-size:2.4rem;
  font-weight: 600;
  text-align:center;
}
.clients {
    align-items: center;
    -webkit-box-align: center;
    display: grid;
    gap: 4.8rem 4.8rem;
    grid-template-columns: auto auto;
    justify-items: center;
    margin: 4.8rem auto;
    max-width: 1024px; }

.clients li {
  list-style: none;
  margin: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.clients img {
  height: 3.2rem;

}
.clients:hover li {
filter: blur(0px);
-webkit-filter: blur(0px);
}
.clients:hover li:not(:hover)  {
filter: blur(2px);
-webkit-filter: blur(2px);
}
.clients li:hover {
-webkit-transform: translateY(-0.3rem);
transform: translateY(-0.3rem); 
}

@media (min-width: 1024px) {
.clients {
    grid-template-columns: auto auto auto auto; }

.clients img {
  height: 4rem; }}

/* --- Images (gray logo) --- */
.clients img {
  -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
          filter: grayscale(100%) brightness(10%) contrast(10%); }

.clients img:hover {
  background: none;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; }

Answer 1

以默认样式为您的网格设置单列可能会解决您的问题...请检查您的问题是否已通过以下修改得到解决。

.wrap {
  padding: 4.8rem;
  position:relative;
  width: 90%;
}
h3 {
  font-size:2.4rem;
  font-weight: 600;
  text-align:center;
}
.clients {
    align-items: center;
    -webkit-box-align: center;
    display: grid;
    gap: 4.8rem 4.8rem;
    grid-template-columns: auto; //I edited this line
    justify-items: center;
    margin: 4.8rem auto;
    max-width: 1024px; }

.clients li {
  list-style: none;
  margin: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.clients img {
  height: 3.2rem;

}
.clients:hover li {
filter: blur(0px);
-webkit-filter: blur(0px);
}
.clients:hover li:not(:hover)  {
filter: blur(2px);
-webkit-filter: blur(2px);
}
.clients li:hover {
-webkit-transform: translateY(-0.3rem);
transform: translateY(-0.3rem); 
}

@media (min-width: 768px) {
  
  .clients {
    grid-template-columns: auto auto; //For tablet
    }
  
}

@media (min-width: 1024px) {
.clients {
    grid-template-columns: auto auto auto auto; }

.clients img {
  height: 4rem; }}

/* --- Images (gray logo) --- */
.clients img {
  -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
          filter: grayscale(100%) brightness(10%) contrast(10%); }

.clients img:hover {
  background: none;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; }

<div class="wrap">
  <h3><strong>We are fortunate to work with exceptional brands</strong></h3>
  <ul class="clients">
    <li><a href=""><img src="https://webslides.tv/static/images/logos/google.svg" alt="Google"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/airbnb.svg" alt="Airbnb"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/apple.svg" alt="Apple"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/microsoft.svg" alt="Microsoft"></a></li>
  </ul>
</div>

Answer 2

这对你有帮助，我已经响应代码，你可以在许多屏幕上设置它。

<style>

.wrap {
            width: 100%;
            height: auto;
            float: left;
            margin: 0;
            padding: 0;
        }

        .wrap h3 {
            font-size: 2.4rem;
            line-height: 2.4rem;
            font-weight: 600;
            text-align: center;
            display: block;
        }

        .clients {
            display: flex;
            padding: 0;
            justify-content: center;
        }

        .clients li {
            list-style: none;
            margin: 0 20px;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }

        .clients img {
            height: 3.2rem;
        }

        .clients:hover li {
            filter: blur(0px);
            -webkit-filter: blur(0px);
        }

        .clients:hover li:not(:hover) {
            filter: blur(2px);
            -webkit-filter: blur(2px);
        }

        .clients li:hover {
            -webkit-transform: translateY(-0.3rem);
            transform: translateY(-0.3rem);
        }

        @media (min-width: 320px) and (max-width: 768px) {
            .clients {
                display: table;
                padding: 0;
                justify-content: center;
                margin: 0 auto;
                text-align: center;
            }
        }
        /* --- Images (gray logo) --- */

        .clients img {
            -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
            filter: grayscale(100%) brightness(10%) contrast(10%);
        }

        .clients img:hover {
            background: none;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }


</style>


<div class="wrap">
        <h3>We are fortunate to work with exceptional brands</h3>
        <ul class="clients">
            <li>
                <a href="javascript:void(0);"><img src="https://webslides.tv/static/images/logos/google.svg" alt="Google"></a>
            </li>
            <li>
                <a href="javascript:void(0);"><img src="https://webslides.tv/static/images/logos/airbnb.svg" alt="Airbnb"></a>
            </li>
            <li>
                <a href="javascript:void(0);"><img src="https://webslides.tv/static/images/logos/apple.svg" alt="Apple"></a>
            </li>
            <li>
                <a href="javascript:void(0);"><img src="https://webslides.tv/static/images/logos/microsoft.svg" alt="Microsoft"></a>
            </li>
        </ul>
    </div>

Demo

制作列表元素 (ul/li) Mobile Friendly/Responsive in HTML and CSS

Making a List Element (ul/li) Mobile Friendly/Responsive in HTML and CSS

html

css

responsive