移动端响应式布局--媒体查询

概念：一个网站适配所有终端，实现不同屏幕分辨率下的终端网页的不同布局，使用媒体查询针对不同设备宽度进行布局设置。

优点：一站适配所有终端，减少工作量，缩短开发周期。对搜索引擎友好，在每个设备中都能得到较好的展示。

缺点：对老版本浏览器兼容性不好，兼容各个设备工作量大。效率较低，加载更多的样式文件和脚本文件。设计比较难以精确，是一种折中性的设计方案，维护困难。

技术：弹性布局，图片，CSS，media, query等

页面的设计和开发需要根据用户的行为、设备环境进行相应的调整。

通过媒体查询检测不同设备的尺寸，通常在页面头部添加meta标签声明viewport

媒体查询

可以根据设备显示器的特性，设置不同的CSS样式。

媒体查询可以检测：viewport的宽度和高度，设备的宽度和高度，设备的朝向，分辨率。

引入方式

1，在样式表中引入：在style标签对中书写语法或通过link引入外部css文件

style:语法：@media  mediaType  and   (media feature) {

                        选择器{属性：属性值}                                

                                }

mediaType:设备类型