VUE 移动端自适应布局终极解决方案

太过爱你忘了你带给我的痛 2022-02-19 14:00 620阅读 0赞

大佬们欲知详情看看这个 [https://github.com/imochen/hotcss][https_github.com_imochen_hotcss]

引入px转rem插件

[https://www.npmjs.com/package/px2rem-loader][https_www.npmjs.com_package_px2rem-loader]

npm install px2rem-loader

使用方法：

1、建一个viewport.js放在js目录下，将下列代码复制到里面

(function( window , document ){
    
    	'use strict';
    
    	//给hotcss开辟个命名空间，别问我为什么，我要给你准备你会用到的方法，免得用到的时候还要自己写。
    	var hotcss = {};
    
    	(function() {
            //根据devicePixelRatio自定计算scale
            //可以有效解决移动端1px这个世纪难题。
            var viewportEl = document.querySelector('meta[name="viewport"]'),
                hotcssEl = document.querySelector('meta[name="hotcss"]'),
                dpr = window.devicePixelRatio || 1,
                maxWidth = 540,
                designWidth = 0;
    
            dpr = dpr >= 3 ? 3 : ( dpr >=2 ? 2 : 1 );
    
            //允许通过自定义name为hotcss的meta头，通过initial-dpr来强制定义页面缩放
            if (hotcssEl) {
                var hotcssCon = hotcssEl.getAttribute('content');
                if (hotcssCon) {
                    var initialDprMatch = hotcssCon.match(/initial\-dpr=([\d\.]+)/);
                    if (initialDprMatch) {
                        dpr = parseFloat(initialDprMatch[1]);
                    }
                    var maxWidthMatch = hotcssCon.match(/max\-width=([\d\.]+)/);
                    if (maxWidthMatch) {
                        maxWidth = parseFloat(maxWidthMatch[1]);
                    }
                    var designWidthMatch = hotcssCon.match(/design\-width=([\d\.]+)/);
                    if (designWidthMatch) {
                        designWidth = parseFloat(designWidthMatch[1]);
                    }
                }
            }
    
            document.documentElement.setAttribute('data-dpr', dpr);
            hotcss.dpr = dpr;
    
            document.documentElement.setAttribute('max-width', maxWidth);
            hotcss.maxWidth = maxWidth;
    
            if( designWidth ){
                document.documentElement.setAttribute('design-width', designWidth);
            }
            hotcss.designWidth = designWidth; // 保证px2rem 和 rem2px 不传第二个参数时, 获取hotcss.designWidth是undefined导致的NaN
    
            var scale = 1 / dpr,
                content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no';
    
            if (viewportEl) {
                viewportEl.setAttribute('content', content);
            } else {
                viewportEl = document.createElement('meta');
                viewportEl.setAttribute('name', 'viewport');
                viewportEl.setAttribute('content', content);
                document.head.appendChild(viewportEl);
            }
    
        })();
    
    	hotcss.px2rem = function( px , designWidth ){
    		//预判你将会在JS中用到尺寸，特提供一个方法助你在JS中将px转为rem。就是这么贴心。
    		if( !designWidth ){
    			//如果你在JS中大量用到此方法，建议直接定义 hotcss.designWidth 来定义设计图尺寸;
    			//否则可以在第二个参数告诉我你的设计图是多大。
    			designWidth = parseInt(hotcss.designWidth , 10);
    		}
    
    		return parseInt(px,10)*320/designWidth/20;
    	}
    
    	hotcss.rem2px = function( rem , designWidth ){
    		//新增一个rem2px的方法。用法和px2rem一致。
    		if( !designWidth ){
    			designWidth = parseInt(hotcss.designWidth , 10);
    		}
    		//rem可能为小数，这里不再做处理了
    		return rem*20*designWidth/320;
    	}
    
    	hotcss.mresize = function(){
    		//对，这个就是核心方法了，给HTML设置font-size。
    		var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
    
            if( hotcss.maxWidth && (innerWidth/hotcss.dpr > hotcss.maxWidth) ){
                innerWidth = hotcss.maxWidth*hotcss.dpr;
            }
    
    		if( !innerWidth ){ return false;}
    
    		document.documentElement.style.fontSize = ( innerWidth*20/320 ) + 'px';
    
            hotcss.callback && hotcss.callback();
    
    	};
    
    	hotcss.mresize(); 
    	//直接调用一次
    
    	window.addEventListener( 'resize' , function(){
    		clearTimeout( hotcss.tid );
    		hotcss.tid = setTimeout( hotcss.mresize , 33 );
    	} , false ); 
    	//绑定resize的时候调用
    
    	window.addEventListener( 'load' , hotcss.mresize , false ); 
    	//防止不明原因的bug。load之后再调用一次。
    
    
    	setTimeout(function(){
    		hotcss.mresize(); 
    		//防止某些机型怪异现象，异步再调用一次
    	},333)
    
    	window.hotcss = hotcss; 
    	//命名空间暴露给你，控制权交给你，想怎么调怎么调。
    
    
    })( window , document );

2、在webpack打包里面配置，将上面的文件打包进js文件

......
        entry: ['./app/js/viewport.js', './app/js/main.js'], // 将viewport.js打包进去
        devServer: {
          contentBase: './dist',
          hot: true,
          compress: true,
          port: 9000,
          clientLogLevel: "none",
          quiet: true
        },
    ......

loader配置

{
              test: /\.vue$/,
              loader: 'vue-loader',
              options: {
                cssModules: {
                  localIdentName: '[path][name]---[local]---[hash:base64:5]',
                  camelCase: true
                },
                extractCSS: true,
                loaders: env.production?{
                  css: ExtractTextPlugin.extract({use: 'css-loader!px2rem-loader?remUnit=40&remPrecision=8', fallback: 'vue-style-loader'}),
                  scss: ExtractTextPlugin.extract({use: 'css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader', fallback: 'vue-style-loader'})
                }:{
                  css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8',
                  scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader'
                }
              }
            }

[https_github.com_imochen_hotcss]: https://github.com/imochen/hotcss
[https_www.npmjs.com_package_px2rem-loader]: https://www.npmjs.com/package/px2rem-loader

发表评论取消回复

表情：

评论列表（有 0 条评论，620人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue + less移动端自适应布局

还是可以写px，但是插件会自动转换，一般情况下，自适应还是不错的，但是模拟器换到ipad ，iPhone X，自适应效果好像就没有那么好（不知道是不是自己本身写的样式问题）

女爷i/ 2023年07月03日 06:04/ 0 赞/ 2 阅读

相关 Html5移动端布局及(rem布局)页面自适应布局详解

常见的页面布局方式有，静态布局 px布局流式布局（Liquid Layout）主要的划分区域的尺寸使用百分数（搭配min-\、max-\属性使用）

缺乏、安全感/ 2023年06月26日 08:19/ 0 赞/ 49 阅读

相关 vue使用rem来实现移动端自适应布局

现在手机屏幕分辨率越来越多，为了适应屏幕不同大小，我们首先要做到的便是页面布局自适应。当然解决方案很多，比如：百分比布局，弹性布局flex，也都能获得不错的效果，这里主要介

缺乏、安全感/ 2023年06月19日 04:21/ 0 赞/ 153 阅读

相关自适应布局的解决方案

自适应布局的解决方案参考文章： [（1）自适应布局的解决方案][1_ _] （2）https://www.cnblogs.com/crazycode2/p/65

冷不防/ 2023年02月15日 14:58/ 0 赞/ 23 阅读

相关 echarts移动端自适应

话说，我也是刚开始接触echarts图表，很多东西都不懂，没法上手操作。这不，在用echarts做图表完成两个后，在意识到一个问题。echarts移动端没有自适应。然后为

系统管理员/ 2022年11月28日 10:33/ 0 赞/ 240 阅读

相关移动端布局实现搜索框宽度自适应

描述例如移动端京东页面 ([https://m.jd.com/][https_m.jd.com]) 的搜索框布局, 两侧的内容是固定不变的, 当浏览器宽度变化时, 只有

柔光的暖阳◎/ 2022年08月30日 15:59/ 0 赞/ 247 阅读

相关移动端（手机）自适应rem布局

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web a

淩亂°似流年/ 2022年07月16日 02:10/ 0 赞/ 331 阅读

相关移动端布局自适应的方法

一、lib-flexible flexible毫无疑问在移动端自适应上还是很方便的，具体用法如下 1.安装flexible.js npm install lib-f

谁借莪１个温暖的怀抱￠/ 2022年05月21日 12:45/ 0 赞/ 378 阅读

相关 VUE 移动端自适应布局终极解决方案

大佬们欲知详情看看这个 [https://github.com/imochen/hotcss][https_github.com_imochen_hotcss] 引入px转r

太过爱你忘了你带给我的痛/ 2022年02月19日 14:00/ 0 赞/ 621 阅读

相关 H5|web移动前端自适应适配布局解决方案

方案： 1. 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 2. 使用flexbox解决方案 3. 使用百分比加媒体查询 4. 使用[rem][]

拼搏现实的明天。/ 2021年10月20日 00:20/ 0 赞/ 336 阅读