详解vue中移动端自适应方案

function htRem() {
	  var ww = document.documentElement.clientWidth;
	  if (ww > 750) {
	    ww = 750;
	  }
	  document.documentElement.style.fontSize = ww / 7.5 + "px";
	}
	htRem();
	window.onresize = function() {
	  htRem();
	};

// main.js
import 'lib-flexible'

cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 
1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 
设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px。


// utils.js
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
// ...



	并放进 loaders 数组中


// utils.js
function generateLoaders(loader, loaderOptions) {
var loaders = [cssLoader, px2remLoader]
// ...


	修改配置后需要重启，然后我们在组件中写单位直接写 px，设计稿量多少就可以写多少了，舒服多了。
                    


                    

                        

                            
相关文章
                        
                        

                                                                                                

                                        无期迷途主线前瞻直播总结 无期迷途主线前瞻直播内容介绍
                                        11-22
                                    
                                                                    

                                        以下哪种非遗技艺是用针在纸上绣画 蚂蚁新村11月21日答案
                                        11-22
                                    
                                                                    

                                        江南百景图听风塔怎么样
                                        11-22
                                    
                                                                    

                                        原神恰斯卡圣遗物怎么搭配
                                        11-22
                                    
                                                                    

                                        2024年霸王茶姬11月22日口令是什么 2024.11.22霸王茶姬口令介绍
                                        11-22
                                    
                                                                    

                                        光遇11.21季节蜡烛在哪里 光遇11月21日季节蜡烛位置攻略
                                        11-22