vue-cli3 + bootstrap3实现响应式布局

1、用px2rem配合lib-flexible，让网页适配。

lib-flexible
作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
安装：

npm install lib-flexible

引入：入口文件main.js中：

import "lib-flexible/flexible.js"

2、手写一个js小工具，省略rem的计算，加快开发速度。
在src目录下增加一个utils目录，在里面新建一个js文件，写入以下内容：

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 750
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

在main.js中引入改js文件：

import "./utils/rem"

然后就可以直接用px写页面啦，而不用去计算rem的值，是不是很舒服呢。

3、使用VW。了解下vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一

安装：

npm i postcss-px-to-viewport -save -dev

在package.json中配置如下：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 32,
        "propList": ["*"]
      }
    },
    "plugins": {
      "autoprefixer": {},
      "postcss-px-to-viewport": {
        "viewportWidth": 750,
        "minPixelValue": 1
      }
    }
  },

4、利用bootstrap实现响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。
对于图片的大小限制一定要在图片的父级元素进行限制。

5、利用bootstrap的栅格系统，下面列一下栅格系统的参数：

	超小屏手机 (<768px)	小屏幕平板(>=768px)	中等屏桌面(>=992px)	大屏桌面(>=1200px)
类前缀	.col-xs	.col-sm	.col-md	.col-lg
列数	12	12	12	12
.container最大宽度	None(自动)	750px	970px	1170px

举个移动设备和桌面的例子：

  
.col-xs-12 .col-md-8
  
.col-xs-6 .col-md-4




  
.col-xs-6 .col-md-4
  
.col-xs-6 .col-md-4
  
.col-xs-6 .col-md-4




  
.col-xs-6
  
.col-xs-6

还有更多对响应式的支持，就不一一列举了。