.list { display: flex; gap: 15px; flex-wrap: wrap; &.blog { >* { width: calc(25% - 15px * 3 / 4); } /* ≥1024px 默认4列;介于768px-1023px 显示3列 */ @media (max-width: 1023px) { >* { width: calc(33.3333% - 15px * 2 / 3); } } /* 介于640px-767px 显示2列 */ @media (max-width: 767px) { >* { width: calc(50% - 15px * 1 / 2); } } /* <640px 显示1列,并优化间距与字号 */ @media (max-width: 639px) { gap: 12px; >* { width: 100%; } .article-card { padding: 14px; } .article-title { font-size: 16px; } .article-meta { font-size: 12px; } .article-desc { font-size: 14px; } } } } .list a:hover { text-decoration: underline; }