移动端的适配

移动端的适配涉及响应式设计和页面自适应：

页面响应式设计：

响应式设计表示在不同的屏幕尺寸下,都有良好的布局和内容表现,简单说,就是一个页面可以适配多种不同尺寸的屏幕,而且看上去还是设计良好的。
为了实现这个目的,可能会利用css媒体查询，js或者css去动态改变布局的尺寸,在这个过程中会伴随元素尺寸的改变,布局的改变,甚至会把元素隐藏。

页面自适应：

页面的设计与设计稿的设计比例一致,这个也是做自适应的目的,在这个过程中针对不同的屏幕宽度元素的尺寸也会改变,但是一般不会有布局改变,和元素的隐藏。

项目使用自适应方案介绍

前言

比较出名的自适应框架：flexible.js【淘宝方案】，最近项目使用的也跟这类似【自适应的做法：一般来说是rem+flex布局】。
+缺点：使响应式样式设置变繁琐
局部响应样式：除了使用 @media screen and (max-width: （...）px) 还得 @media screen and (max-device-width: （...）px)
全局非自适应插件样式的引入： 还得针对dpr进行响应式样式的处理
+优点：不用处理1px的边框问题，不会使边框显粗【在Retina屏即dpr>1的情况下，使1px就大概为一个物理像素点】

需要理解的概念

1. 物理像素（physical pixel）：就是设备中可以显示光的点，我们常说的手机分辨率也是指的物理像素。
2. 设备独立像素（density-independent pixel）：类似尺子的刻度，前端说的px单位指的就是设备独立像素
3. 设备像素比（device pixel ratio）：物理像素／设备独立像素 ，也就是常说的dpr
4. 布局视口: 该标签主要用来告诉浏览器如何规范地渲染Web页面，每个设备有一个默认视口宽度
   在iphonex【屏幕大小：375X812；分辨率：2436X1125像素；默认的视口宽为980】设置如下meta标签：
   <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />
   在布局视口750X1642【 放大了2倍】上计算元素大小,然后再整体缩小2倍到设备屏幕上显示

实现操作处理

1. 根据设备及移动端的设计稿尺寸设置html标签的data-dpr和font-size属性【常见的视觉稿大小大至可为640、750、1125三种】
   为计算方便&小数点的处理，一般把尺寸分为10等分或者100等分【100等分也因与vw单位靠齐】来设计html的font-size，data-dpr用于处理字体的大小

2. 设定视口标签的属性，来确定布局视口及缩放比例，

   • <meta name="viewport" content="width=device-width,initial-scale=1.0" /> ：将布局视口设定为设备大小
   • <meta name="viewport" content="initial-scale=1/x, maximum-scale=1/x, minimum-scale=1/x, user-scalable=no" /> ： 将布局视口设定为x倍的设备大小
3. 元素的占位大小采用rem为单位,页面的布局基本采用flex布局【流行方便】

4. 字体根据data-dpr的属性设定以px为单位的大小,原因如下：

   1. 大多数的字体文件都自带一些点阵尺寸，为方便设置字体为偶数
   2. 肉眼看到的字体大小在各屏幕下应该相同

相应的代码操作【详细的可以去看flexible.js】

• 布局视口的方法

// 第一种：getBoundingClientRect
var width = docEl.getBoundingClientRect().width
// 第二种：clientWidth
var width = document.documentElement.clientWidth

• 可利用样式预处理器处理字体的设定

// scss处理器：定义宏方法
@mixin font($fontSize2x) {
  $fontSize: $fontSize2x/2;
  @if (unitless($fontSize)) {
    font-size: $fontSize + 0px;
    [data-dpr='2'] & {
      font-size: $fontSize * 2 + 0px;
    }
    [data-dpr='3'] & {
      font-size: $fontSize * 3 + 0px;
    }
  } @else {
    font-size: $fontSize;
    [data-dpr='2'] & {
      font-size: $fontSize * 2;
    }
    [data-dpr='3'] & {
      font-size: $fontSize * 3;
    }
  }
}
// 样式文件中引用 
.className {
  @include font(16);
}

其他方案介绍及对比

• 网易方案：没有动态设置视口meta，直接使用width=device-width的布局视口
  这种方案使响应式样式设定简单，但需要额外处理1px边框显粗的问题
• 在视口meta便签中固定width，然后再整体缩放到设备屏幕：<meta name="viewport" content="width=640, user-scalable=no">
  不能使用css媒体查询做响应式，需要额外处理1px边框的问题