媒体查询(media query)

媒体查询就是对设备按照某些条件进行查询，使符合查询条件的设备显示对应的样式，从而达到不同设备显示不同样式的效果。

通过媒体查询，我们可以根据各种设备特征和参数的值或者是否存在来调整我们的网站或应用。

下面是一个媒体查询的例子，不同设备的屏幕宽度不同，显示的颜色也不相同

<style>
 @media (max-width: 768px){ /*0~768*/
    body{
        background: red;
    }
 }  
 @media (max-width: 425px){ /*0~425*/
    body{
        background: yellow;
    }
 }  
 @media (max-width: 375px){ /*0~375*/
    body{
        background: blue;
    }
 }  
 @media (max-width: 320px){ /*0~320*/
    body{
        background: pink;
    }
 }  

 @media (min-width: 769px){ /*769~+∞*/
    body{
        background: green;
    }
 }  
</style> 
/*注意顺序，优先级问题*/

查看效果

或者这样写

<style>
  @media (max-width: 320px){ /*0~320*/
      body{
          background: pink;
      }
   } 
   @media (min-width: 321px) and (max-width: 375px){ /*321~768*/
      body{
          background: red;
      }
   }  
   @media (min-width: 376px) and (max-width: 425px){ /*376~425*/
      body{
          background: yellow;
      }
   }  
   @media (min-width: 426px) and (max-width: 768px){ /*426~768*/
      body{
          background: blue;
      }
   }  

   @media (min-width: 769px){ /*769~+∞*/
      body{
          background: green;
      }
   }
</style>

查看效果

另外，媒体查询的结果是可以用文件来代替其内容的，可以通过引用外部CSS文件来实现媒体查询。例如

<link rel="stylesheet" href="style.css" media="(max-width: 320px)">

上面这段代码的意思是：link标签是否生效是受媒体查询影响的，只有满足设备宽度在 0~320px 之间，这个link标签才会生效。

注意：link 标签里的文件内容都是会先下载下来的，然后再根据查询条件判断是否生效。

一个响应式的导航栏demo

从以上的例子中我们不难看出，响应式页面的本质就是写了两个页面的内容（移动端+PC端）在同一个页面中，然后根据查询条件来切换该用哪个页面。

那我们为什么不将移动端页面和PC端页面的内容分别写在两个页面中，然后让后端来切换状态呢？

后端伪代码

{{ if userAgent.test(/iPhone/) }}
    {{ = render 'iphone_index.html' }} /* 检测为iPhone就渲染移动端页面 */
{{ else }}
    {{ = render 'pc_index.html' }} /* 否则就渲染PC端页面 */
{{ end }}

可以是可以，但这种方式不是目前流行的方式。因为这样做的话，一个页面就不能确定它的 URL 到底是移动端的还是 PC 端的

那我们来看看淘宝，京东等网站是如何做响应式的呢？

当我们在PC端访问 taobao.com 时，它的域名为

PC

然后用开发者工具把切换至移动端，发现淘宝的域名变了

手机

发现不同了吗，淘宝的移动端页面和 PC 端页面各有一个域名，因此实际上淘宝的移动端和 PC 端是两个不同的网站。其实淘宝并没有做响应式，淘宝移动端部门和 PC 部门其实是两个不同的部门，他们分别负责移动端页面和 PC 端页面。京东的网站也是一样。

后端伪代码

{{ if userAgent.test(/iPhone/) }}
    {{ redirect_to `https://h5.m.taobao.com` }} /* 检测是否为移动端域名，是的话就直接访问移动端页面 */
{{ else }}
    {{ = render 'pc_index.html' }} /* 否则就渲染PC端页面 */
{{ end }}

现在几乎没有多少网站是响应式的，只有一些简单的新闻站点或博客站点才会做响应式（因为它们的页面比较简单，没有多少交互）。

移动端要加一个 meta viewport

因为一些历史原因，手机端页面默认把 PC 端页面进行了缩放（大多数 PC 端网页宽度为 980px），比如 iphone6 会用 375px 的宽度去模拟PC端网页 980px 的宽度。

为了解决这个默认缩放的问题，就需要在页面中加一个 meta viewport 标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 // width=device-width: 让当前viewport（视口）宽度等于设备的宽度
 // user-scalable=no: 禁止用户缩放
 // initial-scale=1.0: 设置页面的初始缩放值为1.0（不缩放）
 // maximum-scale=1.0: 允许用户的最大缩放值为1.0
 // minimum-scale=1.0: 允许用户的最小缩放值为1.0 

这样就解决了这个“980问题”

移动端页面与 PC 端页面的不同

移动端页面的交互方式和 PC 端页面不一样，具体表现在：

1. 没有 hover
2. 没有 click 事件，但有 touch 事件。
   可以通过 touch 事件来模拟用户的滑动事件，只需要记录两次触摸的位置，观察两次触摸位置的区别，就知道用户往哪个方向滑动了。
3. 不能 resize。
   viewport（视口）的宽度始终等于设备的宽度（PC 端页面的宽度 !== 设备宽度，可以任意调整页面大小），屏幕始终为固定宽高，因此没有办法调整页面的大小。
4. 没有滚动条。
   当在移动设备上滑动时，才会出现滚动条，停止滑动便会自动隐藏。
   移动端做一个没有滚动条的横向滚动

其他区别几乎没有了，而且移动端（几乎）没有 IE，因此可以用许多最新的 CSS3 属性，如 transform、transation、animation 等。

总结

1. 响应式页面的本质就是写了两个页面的内容（移动端+PC端）在同一个页面中，然后根据查询条件来切换该用哪个页面。
2. 如果是同一个页面内之间的状态，用JS来切换状态
   如果是不同屏幕之间的状态，用媒体查询来切换状态
3. 适配移动端用 媒体查询 & meta viewport
4. 移动端页面的交互方式和 PC 端页面不同
5. 学会隐藏元素 display: none;，移动端常用属性 display: flex，width: calc(50% - 10px);
6. mobile-first 表示优先设计移动端页面的方案
   desktop-first 表示优先设计PC端页面的方案