响应式设计(ResponsiveDesign)之媒体查询

　　响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验&＃xff0c;而且随着目前大屏幕移动设备的普及&＃xff0c;响应式设计将是一个优秀的UI解决方案。随着越来越多的设计师采用这个技术&＃xff0c;我们不仅看到很多的创新&＃xff0c;还看到了一些成形的模式。

二. 响应式布局有哪些优点与缺点&＃xff1f;

      新事物新技术的出现&＃xff0c;会使得很多人盲目跟从&＃xff0c;而不会去思考是否真正符合自己当前条件和需求。所以有必要先让它按位入座。

 一定程度上解决一个页面多个版本维护&＃xff0c;制作成本&＃xff0c;效率&＃xff1b;

 缺点&＃xff1a;

 兼容各种设备工作量大&＃xff0c;效率低下

　代码累赘&＃xff0c;会出现隐藏无用的元素&＃xff0c;加载时间加长

　其实这是一种折衷性质的设计解决方案&＃xff0c;多方面因素影响而达不到最佳效果

　一定程度上改变了网站原有的布局结构&＃xff0c;会出现用户混淆的情况

三.响应式布局该怎么设计&＃xff1f;

  目前主流的响应式前端CSS框架有很多&＃xff0c;这里我们将介绍一个易用&＃xff0c;自定义&＃xff0c;快捷的&＃xff08;CSS3中&＃xff09;Media Query&＃xff08;媒体查询&＃xff09;这一利器。使用这个工具&＃xff0c;可以非常方便快捷的制作出&＃xff0c;符合自己需求的界面。下面我们来一起了解Media Query.

  1.CSS中的Media Query &＃xff08;媒体查询&＃xff09;为何&＃xff1f;

  渲染窗口&＃xff08;视口&＃xff09;的宽和高width&＃xff0c;heigth显示屏幕/触觉设备。

  设备的手持方向&＃xff0c;横向还是竖向orientation&＃xff08;portrait|lanscape&＃xff09;和打印机等。

   画面比例aspect-ratio点阵打印机等。

　设备比例device-aspect-ratio-点阵打印机等。

　对象颜色或颜色列表color&＃xff0c;color-index显示屏幕。

　设备的分辨率resolution。

　示例一&＃xff1a;在link中使用&＃64;media&＃xff1a;

   css” media&＃61;“only screen and &＃xff08;max-width&＃xff1a; 480px&＃xff09;&＃xff0c;only    screen and &＃xff08;max-device-width&＃xff1a; 480px&＃xff09;” href&＃61;“link.css”/>

　　上面使用中only可省略&＃xff0c;限定于计算机显示器&＃xff0c;第一个条件max-width是指渲染界面最大宽度&＃xff0c;第二个条件max-device-width是指设备最大宽度。&＃xff08;这意味着满足媒体查询条件语句的将会引用link.css&＃xff09;.

示例二&＃xff1a;在样式表中内嵌&＃64;media&＃xff1a;

 &＃64;media &＃xff08;min-device-width:1024px&＃xff09; and &＃xff08;max-width:989px&＃xff09;&＃xff0c;screen and &＃xff08;max-device-          width:480px&＃xff09;&＃xff0c;&＃xff08;max-device-width:480px&＃xff09; and &＃xff08;orientation:landscape&＃xff09;&＃xff0c;&＃xff08;min-device- width:480px&＃xff09; and &＃xff08;max-device-width:1024px&＃xff09; and &＃xff08;orientation:portrait&＃xff09; {srules}

　　在示例二中&＃xff0c;设置了电脑显示器分辨率&＃xff08;宽度&＃xff09;大于或等于1024px&＃xff08;并且最大可见宽度为989px&＃xff09;&＃xff1b;屏宽在480px及其以下手持设备&＃xff1b;屏宽在 480px以及横向&＃xff08;即480尺寸平行于地面&＃xff09;放置的手持设备&＃xff1b;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

　　从上面的例子可以看出&＃xff0c;字符间以空格相连&＃xff0c;选取条件包含在小括号内&＃xff0c;srules为兼容设置的样式表&＃xff0c;包含在中括号里面。only&＃xff08;限定某种设备&＃xff0c;可省略&＃xff09;&＃xff0c;and&＃xff08;逻辑与&＃xff09;&＃xff0c;not&＃xff08;排除某种设备&＃xff09;为逻辑关键字&＃xff0c;多种设备用逗号分隔&＃xff0c;这一点继承了css基本语法。

      注&＃xff1a;若页面中引入多个媒体样式时&＃xff0c;有两个或以上引用有交集产生。那么按照css默认优先级规则&＃xff0c;后者将覆盖前者。