移动端web页面适配解决方案--flexible方案

做web开发的童鞋们通常都会遇到移动端页面开发，而手机屏幕尺寸不一，因此页面适配是我们必须解决的问题。下面介绍一种简单又效果非常不错的解决方案--flexible方案。（注：这里以vue项目为例）

一、搭建vue项目

首先我们搭建一个vue项目，关于搭建vue项目步骤，这里不再介绍，可以参考本人前面写的vue+axios+element-ui实战（一）--使用Vue CLI 搭建项目。只是第五步安装element-ui请忽略。

二、安装flexible

npm install lib-flexible --save

安装成功后，在项目入口文件main.js中添加如下代码，引入flexible：

这时我们启动项目，会发现元素添加了data-dpr属性，并且动态改写data-dpr的值，并且元素添加font-size属性，并且动态改写font-size的值：

其实flexible的实质，就是能过JS来动态改写meta标签。

三、安装px2rem-loader

npm install px2rem-loader --save-dev

安装成功后，找到文件 build/utils.js,添加如下配置：

const px2remLoader = { 
    loader: 'px2rem-loader', 
    options: { 
        remUnit: 75 // 设计稿的1/10，这里以750*1334的设计稿为例
    } 
}

然后改写如下配置：

启动项目，我们就可以在写代码时直接用设计稿上的单位了，px2rem会帮我们把px转换成rem，如果有某些不想转换的，你可以在css后面加上 /*no*/，这样就不会对px进行处理，我们来在HelloWorld里面写个小测试：

我们用iphone6/7/8模式，处理后如下：

切换不同的手机，就可以发现渲染出来的盒子大小是不一样的了。

其实真正理解适配问题，还需要了解视窗 viewport、物理像素(physical pixel)、设备独立像素(density-independent pixel)等等概念，大家可以参考：使用Flexible实现手淘H5页面的终端适配 这篇文章。

做移动也可以用一些UI 库，以下介绍一些资源：

1、vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用；

2、vux 基于WeUI和Vue(2.x)开发的移动端UI组件库；

3、Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库；

4、MUI 最接近原生APP体验的高性能前端框架；

5、Muse-ui 基于 Vue 2.0 和 Material Design 的 UI 组件库；

6、Cube UI滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库。