(什么时候做响应式，怎么做响应式)
目前看来，内容为主的社区网站或者电商网站使用自适应布局的并不多，仅有的几个也没有做大范围的自适应布局，一般是使用媒体查询在几个断点（不超过三个，微博这样的只设置了一个断点）做响应式进行布局微调。

内容为主（大量文字，少量图片）的网站不适合做响应式布局，大量图片少量文字的网站比较适合做响应式布局（比如花瓣，airbnb）。是否做响应式和用户体验没有必然关系。

如果要做PC端自适应布局，尽量控制变化的范围，只有在不得已的情况下才进行布局的微调，不要对页面中太多的地方做响应式（尤其是字体随着页面的宽度而变化），因为可以变化的地方越多，不仅成倍增加设计和前端的工作量，而且对页面的风格也更加难以把握，容易出力不讨好，目前市面上页面有这样做的网站，应该极力避免！

在设计前期，由前端和设计共同确定断点。

最优先适配最常见的分辨率，比如1366,1920，1440（如果包括mac air或者其他apple设备和分辨率）

确定好由小屏一直兼容到大屏，还是有大屏一直兼容到小屏幕（这个就是设计那边确定了）

如果做单页展示（比如卧龙和选品），还要考虑高度的限制，考虑最小的高度情况下的设计(这个在设计阶段需要考虑更多！)。 PS： 内容比较多，兼容性要求高的网站不适合使用单屏展示，如果要用的话，考虑好最小的适配分辨率，尤其是最小的高度。

vue实现PC端分辨率适配

lib-flexible + px2rem Loader
lib-flexible 阿里伸缩布局方案
px2rem-loader：px转rem；

依赖
首先需要安装 vue-cli 脚手架，这里我安装的是 cli3。
项目初始化完成后，在项目目录中安装 lib-flexible 和 px2rem-loader。

npm install lib-flexible --save-dev
 npm i postcss-px2rem --save

接着在项目入口文件 main.js 中引入 lib-flexible

import 'lib-flexible/flexible'

配置 postcss-px2rem
在实际开发中得到的设计稿都是 px 单位的，如果手动将 px 转为 rem ，显然是一件较为麻烦的事情，因此可以通过一些工具来帮助我们实现。

vue-cli3 因为减少了对于 webpack 的配置，因此有些文件就被隐藏起来了。可以在文件的根目录下新建一个 vue.config.js 文件，在这个文件里就可以自己增加或修改一些 webpack 配置。

首先添加一个新的 Loader，vue-cli 的文档中也写的非常清楚了，需要在文件中添加以下代码

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('css')
            .test(/\.css$/)
            .oneOf('vue')
            .resourceQuery(/\?vue/)
            .use('px2rem')
            .loader('px2rem-loader')
            .options({ remUnit: 192 })
            .end()
    }
}

此时重启服务器就生效以上配置了。但还是存在一些问题，虽然可以转换为 rem 了，但是计算出来的比例确实 1rem = 54px，这是因为 flexible.js 文件会默认写死了一个比例，我们需要作出一些修改。

vue项目使用rem适配_响应式


flexible.js文件中，找到refreshRem方法，替换掉；

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            //  width = 540 * dpr;   就是这里的问题，需要将 540 修改为 width，不将宽度写死就ok了。
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

这时候重新跑以下项目；就会发现1rem=192px了；

以下代码意思是 设计稿是1920宽度的；量出来100px 传入conversinon函数中，处理后 就是换算后rem的值；这样就可以实现自适应pc端页面了；

必要时可以考虑加入流式布局，弹性盒，媒体查询结合使用；

vue项目使用rem适配_自适应布局_02

<style scoped lang="scss">

@function conversion($num) {
  //换算rem适配pc端
  @return $num/192;
}

.boxTest{
  width:conversion(100)+rem;
  height:conversion(100)+rem;
  border: 1px solid #000;
}