1. 选择题：以下哪个是视口标签的核心作用？（ ）
   A. 优化网页加载速度
   B. 使网页宽度适配设备屏幕宽度
   C. 固定网页缩放比例
   D. 仅用于移动端网页

2. 选择题：下列媒体查询语法正确的是？（ ）
   A. @media screen and (width: 768px) { ... }
   B. @media (max-width=768px) { ... }
   C. @media (min-width: 768px) { ... }
   D. @media device-width: 768px { ... }

3. 填空题：补全代码实现弹性字体：font-size: clamp(____, 2vw, ____);（要求最小14px，最大28px）

4. 编程题：使用媒体查询优化第三章商品列表布局，要求：手机端（≤768px）单列显示，图片宽度100%；平板端（769px-1024px）双列显示；PC端（≥1025px）四列显示。

答案提示：编程题需使用@media (max-width: 768px)和@media (min-width: 1025px)断点，结合grid-template-columns调整列数；多设备显示效果对比图可通过浏览器开发者工具的设备模拟功能获取。