移动端适配

What:移动端需要得到与PC端一样优秀的体验
Why:移动端屏幕宽度与分辨率变化将对原有PC端页面中的对象的展示造成影响。
How:响应式 OR 自适应

1. 移动端静态展示特点

• 分辨率较低意味着可承载像素总量降低
• 屏幕尺寸降低导致浏览器窗口变小影响页面布局
• 手机屏幕规格太多

由此带来的问题是：

• 问题1：迷你的屏幕如何能看电脑屏幕中显示良好的网页
• 问题2：布局的问题如何解决，还要兼顾成本。

2. 常见解决思路

2.1 布局问题解决

2.1.1 同一套DOM结构

媒体查询：一套HTML+(一定条件下生效)多套CSS。
简评：致命问题——宽度变化对页面布局影响太大。结果：复杂页面不适合这套方案，简单页面（新闻，博客）可以。

2.1.2 不同DOM结构

检测用户设备，根据用户设备来返回不同的HTML文件。
简评：简单，分工做，不干扰。

2.1.3 页面对象大小与页面宽度相关

px这种尺寸只包含了具体对象自身的大小信息，并未于其他对象和整个页面建立联系，那么在页面大小发生变化时，px固定的对象时不会随着页面的变化而伸缩的。所以我们采用 rem 与 em等相对尺寸来处理。
由于REM的特性，我们可用JS建立如下的联系：页面宽度—>根节点font-size,那么我们页面中猜中REM单位的对象就都能自适应了。PS：由于1PX问题,某些需要精细控制大小的对象，我们仍然建议采用px等绝对大小。

3.细节问题

3.1 meta:vp的由来

要在手机上显示PC页面，要么出现滚动条，要么把整个网页缩小，如果我们不设置viewport的宽度，手机浏览器拿到页面之后就会自己做相应的处理。这样对响应式是不利的。我们就设置页面宽度 = 设备宽度就可以了。

Concept: the viewport

In theory, the width of the element is restricted by the width of the viewport. The element takes 100% of the width of that viewport.
——https://www.quirksmode.org/mobile/viewports.html

viewport 是用来限制大小的，在PC端其大小是与浏览器窗口大小一致的，所以往往被我们忽视。但是在移动端，其大小就不一定要与浏览器窗口一致了（因为一致太难看了）
viewport的宽度可以用document.documentElement.clientWidth来衡量。

3.2 媒体查询细节

媒体查询包含一个可选的媒体类型和满足CSS3规范的条件下的零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.

• link标签使用媒体查询

• 样式表中的CSS媒体查询

3.3 动态rem细节

• 使用 JS 动态调整 REM

• 在 scss 文件里添加，这个方法可实现 px 自动变 rem

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}

$designWidth : 750;  

.child{
  width: px(375);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}