06 响应式产品列表:桌面多列,手机一列
产品列表必须适配不同屏幕。
本页学习重点
响应式产品列表
缩小浏览器窗口查看变化。
@media (max-width: 960px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
本页总结
电商页面一定要优先检查移动端产品列表。
产品列表必须适配不同屏幕。
缩小浏览器窗口查看变化。
电商页面一定要优先检查移动端产品列表。