如何让这个网格表更好地适用于移动设备？

Question

我几乎完成了我的网格时间表。 在桌面上它看起来很完美我会说。 小问题是移动。 在更大的手机上它看起来可能还不错，但在我的 Iphone 13 mini 上它是..你可以看到一些文本不适合他们的字段，比如第二行和第四行的“Kondiční kickbox” 。

也许减少时间字段？ 你知道我有 06-07、07-08.... 14-15，但对于手机来说，它可能只有 06-15。 但我必须制作第二个网格表并始终隐藏一个并显示另一个取决于设备的宽度。

 .grid { display: grid; grid-template-columns: repeat(64, 1fr); text-align: center; }.grid > * { display: flex; justify-content: center; align-items: center; border: 1px solid #c0c0c0; padding: 5px 5px; font-weight: bold; height: 66px; line-height: 1.5rem; font-size: 13px; }.span-col-4 { grid-column: span 4 / auto; }.span-col-48 { grid-column: span 48 / auto; }.span-col-6 { grid-column: span 6 / auto; }.span-col-2 { grid-column: span 2 / auto; }.span-col-38 { grid-column: span 38 / auto; }.span-col-5 { grid-column: span 5 / auto; }.span-col-44 { grid-column: span 44 / auto; }.span-col-60 { grid-column: span 60 / auto; }.time, .day-column { background-image: linear-gradient( to top, #b51c18, #c6201a, #d8231d, #ea271f, #fc2b21 ); color: white; height: 45px; }.day-column { color: black; }.sparingy { background-image: linear-gradient( to bottom, #02080a, #0d1c21, #0e2b37, #103c50, #154c6a ); color: white; }.kickbox6 { background-image: linear-gradient( to bottom, #ffa93a, #ffa32f, #ff9d24, #ff9716, #ff9000 ); color: black; }.kickbox10 { background-image: linear-gradient( to bottom, #ff9000, #ff8100, #ff7200, #ff6100, #ff4d00 ); color: black; }.rodice { background-image: linear-gradient( to bottom, #fffe00, #f4fe00, #eaff00, #deff00, #d3ff00 ); color: black; }.mma { background-image: linear-gradient( to bottom, #ff0e00, #ea0e02, #d50e03, #c00e04, #ac0d04 ); color: white; }.zavodnici { background-image: linear-gradient( to top, #114560, #0f5274, #0c5f88, #096c9d, #0a79b3 ); color: white; }.sparingy { background-image: linear-gradient( to bottom, #0063ff, #1748cc, #142f9c, #09186f, #000046 ); }.kondicni { background-color: #489bc9; color: black; }.box { background-color: #524d4d; color: white; } @media screen and (max-width: 1024px) {.grid > * { font-size: 1.5vw; line-height: 1rem; } }

 <div class="grid"> <div class="span-col-4 time"></div> <div class="span-col-4 time">06:00-07:00</div> <div class="span-col-4 time">07:00-08:00</div> <div class="span-col-4 time">08:00-09:00</div> <div class="span-col-4 time">09:00-10:00</div> <div class="span-col-4 time">10:00-11:00</div> <div class="span-col-4 time">11:00-12:00</div> <div class="span-col-4 time">12:00-13:00</div> <div class="span-col-4 time">13:00-14:00</div> <div class="span-col-4 time">14:00-15:00</div> <div class="span-col-4 time">15:00-16:00</div> <div class="span-col-4 time">16:00-17:00</div> <div class="span-col-4 time">17:00-18:00</div> <div class="span-col-4 time">18:00-19:00</div> <div class="span-col-4 time">19:00-20:00</div> <div class="span-col-4 time">20:00-21:00</div> <div class="span-col-4">Pondělí</div> <div class="span-col-48">Soukromé lekce a veřejnost po domluvě</div> <div class="span-col-4 kondicni">Kondiční kickbox</div> <div class="span-col-6 box">BOX</div> <div class="span-col-2"></div> <div class="span-col-4">Úterý</div> <div class="span-col-38">Soukromé lekce a veřejnost po domluvě</div> <div class="span-col-4 kickbox6">Kickbox děti <br />6 - 10 let</div> <div class="span-col-5 kickbox10">Kickbox děti <br />10 - 15 let</div> <div class="span-col-5 mma">MMA</div> <div class="span-col-6 zavodnici">K1 - závodníci</div> <div class="span-col-2"></div> <div class="span-col-4">Středa</div> <div class="span-col-44">Soukromé lekce a veřejnost po domluvě</div> <div class="span-col-4 rodice"> Rodiče a děti <br /> 3 - 6 let </div> <div class="span-col-4 kondicni">Kondiční kickbox</div> <div class="span-col-6 box">BOX</div> <div class="span-col-2"></div> <div class="span-col-4">Čtvrtek</div> <div class="span-col-38">Soukromé lekce a veřejnost po domluvě</div> <div class="span-col-4 kickbox6">Kickbox děti <br />6 - 10 let</div> <div class="span-col-5 kickbox10">Kickbox děti <br />10 - 15 let</div> <div class="span-col-5 mma">MMA</div> <div class="span-col-6 zavodnici">K1 - závodníci</div> <div class="span-col-2"></div> <div class="span-col-4">Pátek</div> <div class="span-col-48">Soukromé lekce a veřejnost po domluvě</div> <div class="span-col-6 sparingy">Sparingy</div> <div class="span-col-6"></div> <div class="span-col-4">Sobota</div> <div class="span-col-60">Pronájem, semináře, akce, atd...</div> <div class="span-col-4">Neděle</div> <div class="span-col-60">Pronájem, semináře, akce, atd...</div> </div>

Answer 1

不容易，当它不合适时……它不合适，而且任何解决方案都会给出一个不太好的设计，所有问题都是妥协！

您已经在更改较小的字体大小...您可以继续，但要使此文本适合 kickbox6（例如），它的字体大小将非常非常小。

您可以尝试 text-overflow:ellipsis 看看是否适合您。

例如，对于 kickbox6，您可以添加：

.kickbox6 {
    background-image: linear-gradient(
    to bottom,
    #ffa93a,
    #ffa32f,
    #ff9d24,
    #ff9716,
    #ff9000
    );
    color: black;

   overflow: hidden;
   width: 64px // your grid column size
   text-overflow: ellipsis;
   white-space: nowrap;
}

没有最好的效果，但它适合...