52111-HTML5移动Web开发项目化实战教程 项目7 习题答案.docx

1.使用媒体查询实现PC端与移动端不同布局的方法

通过CSS的@media规则，针对不同屏幕宽度等设备特性，定义差异化的CSS样式，来实现响应式布局。

2.媒体查询的标准语法格式及属性作用

标准语法：

@media[media-type]and[media-feature]{

/*匹配时生效的样式*/}

media-type：指定媒体类型，如screen（屏幕设备）、print（打印设备）等，可省略，默认匹配所有媒体类型。

media-feature：指定媒体特性，是核心判断条件，常见的有：

width/min-width/max-width：基于视口宽度