2018-06-07 初识移动端（响应式）

前言：今天初次了解了移动端的一些常识，包括PC端和移动端的区别，媒体查询等的相关操作,以及国内的网站如何实现不同的端展示不同的样式。

---

1、媒体查询（附带MDN解释）

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

• 例1：（通过不同的媒体查询使不同的CSS文件生效，下面的例子是指宽度为0-800px之间时生效）

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

• 例2：（通过不同的媒体查询使不同的CSS样式生效，下面的例子是指宽度在0-600px之间时样式生效）

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

• 注：通过类似例2的方式设置样式时，可能需要这样的效果：浏览器宽度0-320px、321px-375px、376px-425px、426px以上，这四个宽度区间不同的样式，那么该如何设置呢？
  首先，如果按顺序@media (max-width: 320px)、 @media (max-width: 375px)、 @media (max-width:425px)、 @media (min-width: 426px)这么写的化，会出现一个现象，即所有宽度的样式都是376px-426px状态下的样式，这是因为后出现的@media (max-width:425px)包含的是0-425px的情形，所以覆盖了前面的样式设置。
  所以目前有两种写法，（1）倒着写，即先写宽度426px以上的，然后写376px-425px之间的，以此类推；（2）用and连接确定区间的两个端点，如@media (min-width: 376px) and (max-width:425px)

2、学会隐藏元素

移动端设计中，很重要的一条就是要学会隐藏元素，例如这个网站 https://www.smashingmagazine.com/，就是根据网页宽度来响应式不同的样式。以该网站的导航栏为例，它根据页面宽度大致三有种不同的样式

• 宽度较大时，它的导航栏是这样的，左边有logo，中间是导航栏的各种按钮，右边是可以点击的Topics按钮：
  

• 宽度逐渐缩小，导航栏中间按钮下边的小字消失了：
  

• 宽度继续缩小，出现最后一种样式，导航栏中间的按钮消失，而右边原来的Topics按钮，现在变为Menu按钮：
  
  而Menu点击后才出现链接：
  

做出上述效果，最主要的就是在不同的宽度时，让该出现的元素出现，不该出现的元素隐藏起来

3、移动端与PC端设计的一些区别

• 没有 hover 效果（因此尽量少的使用CSS中的hover可以在从PC端改到移动端开发时更少的修改代码，相反的，如果hover在开发时使用的过多，到移动端时网页样式多半就废了）
• 有 touch 事件 移动端是可以触摸的，所以需要使用touch触摸监听
• 没有 resize 即在移动端，浏览器的宽高是无法更改的，其宽高就等于设备的宽高。
• 没有滚动条 横向纵向都没有滚动条，超出屏幕的内容通过滑动屏幕来观看
• 移动端需要设置滑动事件 但是原生JS是没有滑动事件的，不过包括jquery、Vue等框架都封装的有swipe事件可以实现滑动效果

4、国内大多数网站的设计思路

在国内，如果网页需要在不同的设备拥有不同的样式，他们很少像第二条中展示的smashingmagazine网站一样做响应式，大体上有以下两种思路：
- 不同的端跳转到不同的域名，比如淘宝、京东，他们的PC端会跳转到www.taobao.com域名（或www.jd.com），而移动端会跳转到h5.m.taobao.com（或m.jd.com/）
- 不同的端通过识别user Agent，来渲染不同的CSS样式，如知乎