CSS之七个高度有效的媒体查询技巧

我们都知道，Media Queries是实现响应式设计的秘密武器。在这篇文章中，将向大家介绍制定高质量的Media Queries需要注意的一些事项

1. 让内容确定断点

很多时候，在响应式设计中，你经常看到的断点值是：320px、480px、768px和1024px等

不要使用流行的设备尺寸（320px是iPhone设备的竖屏尺寸，480是iPhone设备横向屏幕尺寸，768px是iPad竖向屏幕尺寸，等等）来确定断点。该设备的屏幕（Device Landscape）是不断在变化的，所以使用流行设备的尺寸作为断点，他的实际价值存在的意义可能没有什么，甚至一年的时间都坚持不到。Web本质是流动的，因此我们的工作是在任何屏幕上创建外观、功能等，而不是简简单单的几个断点

2. 对布局作为一种增加

作为一个移动先行响应式设计策略，重要的是我们要有一个移动先行的风格方式

这里当屏幕小于50em的时候，column就会丢弃浮动而且width自适应单栏显示。而当屏幕大于50em的时候，column就会左浮动而且宽度是50%。从而完成不同分辨率下面的不同展示风格

3. 使用相对单位

我常喜欢背靠着椅子使用我的电脑，所以我经常使用cmd +来放大网站文本。当我们断点使用的是像素时，页面放到出现水平滚动条，并没有正常的工作

不应该使用像素，我们应该为我们的媒体查询使用相对单位

首先在样式中，我们都放弃了对像素(px)的使用，在使用em、rem和百分比(%)，那么我们为什么不能将这些相对单位运用到媒体查询中呢？其次，在媒体查询中使用相对单位允许浏览来调整设计基于用户缩放的级别，让用户有一个更愉快、更容易阅读的用户体验

4. 超越宽度

视窗（Viewport）宽度不是唯一的媒体查询可检测的。有很多媒体特性我们可以检测，包括颜色、颜色指数、纵横比、宽度以及装置设备宽度、高度和设计高度、方位、单色、分辨率、扫描、像素密度等等

虽然我不知道这么一大堆的东西是什么，但有几个真正有用的功能，可以帮助我们

- 使用pix-density可以有条件的提供更大的背景图、视网膜图标和高分辨率屏幕

- 使用height可以检测可用的屏幕高度，并调整相应的样式风格。例如，在这个网站我想根据高度来扩展我的标题类型

- 使用orientation来检测屏幕是横向还是纵向模式。取向可以用于有条件的禁用固定定位，并释放出屏幕可用空间

5. 不要做得太过火

使用响应式设计，很容易陷入所有媒体查询的魔法和变得有点疯狂。虽然媒体查询非常有趣，但在设计中使用大量的复杂性会让你变得难堪。我们已经不得不花很多时间去处理这些复杂性：设备屏幕，令人眼花缭乱的浏览器和设备，为了让客户和队友使用更加的舒服。我非常喜欢Lyza的建议尽可能少。这绝对是符合我们的利益以及追求简单的页面格局

就这样，现在就开始动手查询你的媒体查询