由浅入深刨根问底媒体查询

响应式设计　　

　　响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同。按照可用的屏幕属性，响应式设计提供了 UI 的最佳效果。例如，如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏，那么该侧边栏在不同大小的屏幕上的呈现是不同的。该侧边栏在较大的桌面监控器上是宽屏的，在较小的 智能手机屏幕上是极其窄的。而在最高的或最小的屏幕上，侧边栏很可能不再是可用的 UI 组件。

　　这两天做了一个小项目，怎样完成响应式布局、实现iPhone 6 Plus、iPhone 6等手机端适配，还要完成能够实现横屏和竖屏，还有各种CSS3的效果。

下面是一些关于媒体查询的一些详细介绍。

媒体查询的规则：

　　@media all and (min-width: 100px){...}是实现PC端的响应式布局。

　　最小水平屏幕的宽度为100px的屏幕。但是他也是有规则的，
*@media all 是媒体类型，他的意思是说CSS应用与所有的媒体类型。
*（min—width：100px）是包含媒体查询的表达式，如果浏览器最小宽度为100px，那么他会告诉浏览器他只会运用CSS

高度和宽度的媒体查询：

 @media all and（min-width：100px） and （min-height：100px）{...}

能够定义宽度，当然也能够定义高度。最小宽度的屏幕为100像素和最小高度的屏幕为100像素

媒体查询and条件：

　　@media all and (min-width: 100px) and (max-width: 500px){...}

他会告诉你我只会在100-500像素之间才会被激活，才会去实现你给我的样式。

媒体查询or关键词：

　　@media all and (min-width: 100px) or (orientation: landscape){...}

说明至少宽度为100像素或者屏幕为横屏。（从字面上理解，or的意思就是“或者”，二可选一）

媒体查询not关键词：

　　@media ( not min-width: 100px){...}

当最小的宽度不为100像素时，他会显示我们想要的效果。（从字面上理解，not的意思就是“不”）

orientation媒体查询：

@media (min-width: 763px) and (orientation: landscape){...}实现移动端横屏的效果。

　　说明最小屏幕在763像素以上能够完成横屏的实现（当长度大于高度时，我们大家都把他叫做是横屏。通常是在智能手机和平板上面能够实现的）

@media (max-width: 414px) and (orientation:portrait){...}实现移动端竖屏的效果。

 

　　说明最大屏幕在414像素以下能够完成竖屏的效果（当高度大于长度时，我们大家都把他叫做是竖屏。通常是在智能手机和平板上面实现的）

 

不带 -min-    -max-前缀：

@media (width:100px) and (height:100px){...}

当屏幕的宽度正好为100像素、屏幕的高度的正好为100像素的时候，才能够执行CSS3中的请求。

 

谢谢各位。如果有不对的，麻烦一起探讨！谢谢。