Vue解像度適応

方法1
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       

			
			    //        1680，    1920    ，   css
			    if(window.screen.width >= 1680){
			        document.write('<link rel="stylesheet" href="css/index_1920.css">');
			    }
			    //      1600-1680    ，   css
			    else if(window.screen.width >= 1600){
			        document.write('<link rel="stylesheet" href="css/index_1600.css">');
			    }
			    //      1600    ，   css
			    else{
			        document.write('<link rel="stylesheet" href="css/index.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;      //<<<<<<