Vue 分辨率 自适应

方法一

documentClientHeight放在VueX中管理

 computed: {
      documentClientHeight: {
        get() {
          return this.$store.state.common.documentClientHeight
        },
        set(val) {
          this.$store.commit('common/updateDocumentClientHeight', val)
        }
      },

设置div高度

 siteShujuViewHeight () {
        var height = this.documentClientHeight - 180
        return { height: height + 'px' }
      },

获取屏幕高度的方法

document.documentElement.clientHeight

方法2 使用erm

https://www.jianshu.com/p/02c1d9a63dc8

cnpm i lib-flexible -S

cnpm i px2rem-loader -D

方案3 wupeng 提供

-------------------- 方案一 ------------------------------------------------------------------------------------------------

	1. 根据不同的分辨率，加载不同的CSS样式文件

		这个方法的思路是，分别针对800、1280、1440、1600、1920等分辨率，创建不同的css文件。然后在各种分辨率下，写css样式表。

		可能你会感觉针对一个页面，要写这么多不同的css样式表，这个工作量肯定很大。其实也不尽然，根据我在这个项目中的实践，发现这个工作量其实是比较小的。

		首先，我们在做项目的时候，一般情况下会有一些范围限制，比如这个项目只需要适配1280~1920分辨率即可。而且各个分辨率之间，我们有的时候只是对页面上的元素进行宽高、尺寸、位置等进行调整，整体的一个框架是相似或者说是相同的。

		不仅如此，有的时候项目的要求不高，没有比较1:1高度还原设计稿，那么这个时候，我们在1440分辨率下的样式表，在1280分辨率下也是实用的，这个时候，我们的工作量又进一步减少。

		这个时候，我们可以先完成一个分辨率下的css样式表。然后在这个基础之上，对其他分辨率进行调整即可。这个过程我们只需要调整一些参数即可。

		比如在项目里面，这对不同的分辨率，我只做了三个样式表


		这个时候，我们只需要在我们的HTML页面的标签中，使用js，根据不同的电脑分辨率，加载不同的css样式表。注意这里的js一定要写在标签里面，这样在加载页面内容之前，可以提前把css样式表加载出来

			
		这样的话，就可以根据不同电脑的分辨率，就在不同的css样式表。由此我们便完成了页面使用不同的分辨率。


	2.采用媒体查询

		媒体查询是CSS3的新特性，绝大多数浏览器都可兼容这一特性。这个方法的思路也是根据不同的分辨率，应用不同的css样式。

		这个思路和和方法一差不多，或者说方法一的思路和这个思路差不多。我们有两种使用媒体查询的方式。

		1).根据不同的分辨率，引入不同的css样式表
			这个方法和方法一相同，也是通过判断电脑的分辨率，来引入相对应的css样式表。

			
			
			
			


		2).在同一个css样式表中，根据不同的分辨率，写不同的css样式
		这个方法只有一个css演示表，在这个样式表里面，根据不同的分辨率，写不同的css样式。

			

	3. 总结
	以上的方法的思路大同小异。发现根据小分辨率样式去调整大分辨率样式比较简单。当然，也许你喜欢由大到小，这都无所谓，看个人习惯。

	还有就是，最好有注释，这样我们在其他分辨率下去调整的时候，不至于一头雾水。



	---------------- 方案二 ----------------------------------------------------------------------------------------------------


	vue实现PC端分辨率适配


	依赖
		项目基础配置使用 vue-cli 生成
		自适应方案核心： 阿里可伸缩布局方案 lib-flexible
		px转rem：px2rem，它有webpack的loader px2rem

	开始
		先使用vue脚手架初始化一个webpack项目

		vue init webpack 项目名

	项目初始化好了之后，进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader

		npm install lib-flexible --save

		npm i postcss-px2rem px2rem-loader -D

	安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible

			import 'lib-flexible'
		
	但是在实际开发中，我们通过设计稿得到的单位是px，所以要将px转换成rem再进行样式中。但如果都需要手动转的话，就很麻烦，所以需要一个工具替我们完成这项工作，这个时候就需要配置px2rem了，当然，编辑器可能也要对应的插件。


	在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 1920px。

			//utils.js
			const cssLoader = {
			  loader: 'css-loader',
			   options: {
			     sourceMap: options.sourceMap
			   }
			 }

			 const px2remLoader = {
			   loader: 'px2rem-loader',
			   options: {
			     remUnit: 192
			   }
			 }

		放进loaders数组中

		//utils.js
		function generateLoaders (loader, loaderOptions) {
		   	const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

		   	if (loader) {
		     	loaders.push({
		       		loader: loader + '-loader',
		       		options: Object.assign({}, loaderOptions, {
		         	sourceMap: options.sourceMap
		       	})
		    })
		}

		修改配置以后重启服务器。

	以上是vue-cli2配置px2rem的方式。

	----------vue-cli3------------------------------

	如果脚手架用的是vue-cli3的话，由于vue-cli3 生成的目录结构没有build文件，所以在配置上也有一些不同。
	vue-cli3配置方式：
	找到文件 vue.config.js，添加规则：

			// css相关配置
			css: {
				// 启用 CSS modules
				modules: false,
				// 是否使用css分离插件
				extract: true,
				// 开启 CSS source maps?
				sourceMap: false,
				// css预设器配置项
				loaderOptions: {
					css: {},
					postcss: {
						plugins: [
							//remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
							//假如设计图给的宽度是1920，我们通常就会把remUnit设置为192，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
							require('postcss-px2rem')({
								remUnit: 192
							})
						]
					}
				},
			},




	但是有一个问题，我明明设置的宽度是按1920来的，为什么计算出来1rem=54px?

	是不是插件哪里出了问题，或者在哪里定义过跟54或者540相关的东西？

	找到lib-flexble/flexible.js文件看下：

		获取屏幕宽度,但是当屏幕宽度大于540px的时候,屏幕宽度写死成了540

		找到问题了就解决问题，既然文件把屏幕宽度写死了，那就不写死：
			function refreshRem(){
			    var width = docEl.getBoundingClientRect().width;
			      if (width / dpr > 540) {
			        width = width * dpr;      //<<<<<<<-----修改这里
			    }
			    var rem = width / 10;
			    docEl.style.fontSize = rem + 'px';
			    flexible.rem = win.rem = rem;
			}

	现在再重启项目，看一下运行结果。


	如果觉得修改源码不方便可以把修改后的flexible.js放在 src/assets 目录下当作静态文件引用


	注意：使用 px2rem-loader 后再使用px上有些不同：
	    直接写 px ，编译后会直接转化成rem —— 除开下面两种情况，其他长度用这个
	    在 px 后面添加 /*no*/ ，不会转化 px，会原样输出。 —— 一般border需用这个
	    在 px 后面添加 /*px*/ ，会根据 dpr 的不同，生成三套代码。—— 一般字体需用这个