这次我们从59em来断点，904px

@media (max-width: 59em) { html { font-size: 52%; } .hero { grid-template-columns: 1fr; }}

这个首页的位置更改为一行可能更好看！

剩下的代码我们一次写完，主要的思路就是通过浏览器的Devtools去调整尺寸，不合适的就使用媒体查询去更改就完事了；

@media (max-width: 59em) { html { font-size: 52%; } .hero { grid-template-columns: 1fr; padding: 0 8rem; gap: 6.4rem; } .hero-text-box, .hero-img-box { text-align: center; } .hero-image { width: 60%; } .delivered-meals { justify-content: center; margin-top: 3.2rem; } .logos img { height: 2.4rem; } .step-number { font-size: 7.4rem; } .meal-content { padding: 2.4rem 3.2rem 3.2rem 3.2rem; } .heading-tertiary { font-size: 2.6rem; } .section-testimonials { grid-template-columns: 1fr; } .gallery { grid-template-columns: repeat(6, 1fr); } .cat { grid-template-columns: 3fr 2fr; } .cta-form { grid-template-columns: 1fr; } .btn--form { margin-top: 1.2rem; }}

通过整个页面的修正，我们可以让其来平板上适配的更好！

芒种期刊

前卫杂志官网

广告大观杂志社