移动端页面开发（适配）解决方案

移动端比较麻烦的就是适配问题。设计图用px来画，该怎么开发或者适配呢？？

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-
scale=1.0, maximum-scale=1.0,user-scalable=no">

viewport ：视口 就是  web 页面上用户的可见区域。就是手机的物理宽度。
后面的属性就是直接翻译后就可以

看到Html里面的这部分元数据的部分代码之后，离适配近了一大步。
字体比较多，需要适配很多细节时候。极力推荐 rem方案。直接上代码, 整体思路就是用scss(css预编译器)中将设计图中px计算成rem。然后页面根节点大小是根据窗口动态变化的。（rem不熟悉的自行搜索）先看一下简单的例子。

1. 先安装 flexble,安装之后可以自行引入

npm install lib-flexible --save

// 使用flexble(vue的话 在main.js中引入)
import 'lib-flexible'

2. 安装完成之后，可以运行之后看到下面的图。

   
   手机运行模拟.png
   html节点.png

3. 因为web设计图一般都是px来画的。所以我们可以在scss里面写一个将px转换成Rem的函数

/* 根据750p分辨率来设置比率
**/
$base-design-font-size: 75px;

/*去掉数值后的单位 主要为了后面开发的维护*/
@function __strip-units($number) {
  @if type-of($number) == 'number' {
    @return $number/($number*0 +1);
  }
  @warn 'Exception in method __stip-unit : Not a number value: #{$number}';
  @return $number;
}
//将px转成rem
@function px2rem($origLen) {
  $origLen: __strip-units($origLen);
  $base-design-font-size: __strip-units($base-design-font-size);
  @return #{$origLen/$base-design-font-size}rem;
}

4. 在scss里面直接调用

//手机版本的样式
@import '@/assets/css/base.scss';

// 写设计图中页面的大小
比如图片的 设计图 width为81px。
img{
width:px2rem(81);
}

5. 使用px2rem 在sass处理后浏览器的元素尺寸都是用rem来显示的。