HTML5 Media query 调查报告模板

第一章 Media query知识点描述

Media query 是一个神奇的技术，他使不同的显示设备拥有更合理的显示效果，该技术允许使用媒体表达式指定媒体类型，然后根据不同的媒体类型来选择相应的样式。他的'表达式格式为：

@media 媒体类型 and (设备特性) {样式代码}

通过指定相应的媒体类型和设备特性，media query 技术会自动跟你设置的css进行匹配。常用的媒体类型有：screen(电脑显示器),handheld(便携设备)，tv(电视及类型设备)。

设备特性：min-width,min-hEight等

第二章 技术价值论文联盟

media query 可帮助我们解决横屏和竖屏切换问题，使用mediaquery判断用户是否已经横屏，如果横屏则采用自定义的横屏样式的渲染。解决android终端的显示屏幕的复杂性。

第三章 实例

实例名称：

在大于960的可用区域下三栏同时显示，在大于640小于960的情况下，右边显示在最下面，在小于640的情况一栏显示

实例条件：

熟悉dreamweaver

网页基础知识

Media query相关知识

实现过程：

建立

写入html并预览，拖拽浏览器大小

加入css并预览，拖拽浏览器大小

第四章 总结

media query 是在提高用户体验上比较重要的一个方面，他帮助我们使不同设备之间的UI能保持更合理的显示方式。