使用flexible.js和第三方依赖包postcss-px2rem，解决pc端响应式和移动端自适应问题

已于 2022-10-13 14:28:10 修改
阅读量1.8k 收藏 3
点赞数
分类专栏： vue 文章标签： 微信 前端 腾讯云
于 2022-03-31 15:43:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37117408/article/details/123874028
版权

使用flexible.js和第三方依赖包postcss-px2rem，解决pc端响应式和移动端自适应问题

在这里插入图片描述

在这里插入图片描述

第一步

1.创建vue项目
	vue create '项目名称'
	
2.运行项目
	npm run dev
	
3.配置vue.config.js

4.下载第三方依赖包，进行rem布局
	npm install postcss-px2rem -S
	
	在main.js中导入rem的js
	import '@/utils/flexible.js'
	
	在vue.config.js中配置
	css: {
	  loaderOptions: {
	    css: {
	      // 这里的选项会传递给 css-loader
	    },
	    postcss: {
	      // 这里的选项会传递给 postcss-loader
	      plugins: [
	        require('postcss-px2rem')({
	          // 适配375屏幕，设计图750中量出来的尺寸要 / 2
	          // 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库
	          remUnit: 37.5
	        })
	      ]
	    }
	  }
	}

vue.config.js

const port = process.env.port

module.exports = {
  devServer: {
    port: port,
    compress: true,
    open: true// 运行时自动打开浏览器
  },
  css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
        plugins: [
          require('postcss-px2rem')({
            // 适配375屏幕，设计图750中量出来的尺寸要 / 2
            // 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库
            remUnit: 37.5
          })
        ]
      }
    }
  }
}

utils/flexible.js

;
(function(win, lib) {
	var doc = win.document;
	var docEl = doc.documentElement;
	var metaEl = doc.querySelector('meta[name="viewport"]');
	var flexibleEl = doc.querySelector('meta[name="flexible"]');
	var dpr = 0;
	var scale = 0;
	var tid;
	var flexible = lib.flexible || (lib.flexible = {});

	if (metaEl) {
		console.warn('将根据已有的meta标签来设置缩放比例');
		var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
		if (match) {
			scale = parseFloat(match[1]);
			dpr = parseInt(1 / scale);
		}
	} else if (flexibleEl) {
		var content = flexibleEl.getAttribute('content');
		if (content) {
			var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
			var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
			if (initialDpr) {
				dpr = parseFloat(initialDpr[1]);
				scale = parseFloat((1 / dpr).toFixed(2));
			}
			if (maximumDpr) {
				dpr = parseFloat(maximumDpr[1]);
				scale = parseFloat((1 / dpr).toFixed(2));
			}
		}
	}

	if (!dpr && !scale) {
		var isAndroid = win.navigator.appVersion.match(/android/gi);
		var isIPhone = win.navigator.appVersion.match(/iphone/gi);
		var devicePixelRatio = win.devicePixelRatio;
		if (isIPhone) {
			// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
			if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
				dpr = 3;
			} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
				dpr = 2;
			} else {
				dpr = 1;
			}
		} else {
			// 其他设备下，仍旧使用1倍的方案
			dpr = 1;
		}
		scale = 1 / dpr;
	}

	docEl.setAttribute('data-dpr', dpr);
	if (!metaEl) {
		metaEl = doc.createElement('meta');
		metaEl.setAttribute('name', 'viewport');
		metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' +
			scale + ', user-scalable=no');
		if (docEl.firstElementChild) {
			docEl.firstElementChild.appendChild(metaEl);
		} else {
			var wrap = doc.createElement('div');
			wrap.appendChild(metaEl);
			doc.write(wrap.innerHTML);
		}
	}

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		/**
		 * 设置成1200，当屏幕小于1200时，开始改变html的font-size值
		 **/
		if (width / dpr > 1200) {
			width = 1200 * dpr;
		}
		var rem = width / 20;
		docEl.style.fontSize = rem + 'px';
		flexible.rem = win.rem = rem;
	}

	win.addEventListener('resize', function() {
		clearTimeout(tid);
		tid = setTimeout(refreshRem, 30);
	}, false);
	win.addEventListener('pageshow', function(e) {
		if (e.persisted) {
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 30);
		}
	}, false);

	if (doc.readyState === 'complete') {
		doc.body.style.fontSize = 12 * dpr + 'px';
	} else {
		doc.addEventListener('DOMContentLoaded', function(e) {
			doc.body.style.fontSize = 12 * dpr + 'px';
		}, false);
	}


	refreshRem();

	flexible.dpr = win.dpr = dpr;
	flexible.refreshRem = refreshRem;
	flexible.rem2px = function(d) {
		var val = parseFloat(d) * this.rem;
		if (typeof d === 'string' && d.match(/rem$/)) {
			val += 'px';
		}
		return val;
	}
	flexible.px2rem = function(d) {
		var val = parseFloat(d) / this.rem;
		if (typeof d === 'string' && d.match(/px$/)) {
			val += 'rem';
		}
		return val;
	}

})(window, window['lib'] || (window['lib'] = {}));

为了解决屏幕大于1200px时，html的font-size随时计算，导致样式错乱问题，给HTML的font-size设置死值 font-size: 87.9px !important;

media.scss

/**
 *超小屏幕     手机        <768px
 *小屏幕       平板        >=768px ~ <992px  
 *中等屏幕      桌面       >=992px ~ <1200px
 *大屏幕       桌面        >=1200px  
 **/
.wd-container {
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	display: flex;
	flex-direction: column;
}
.wd-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.wd-col-24 {
	width: calc((100% / 24) * 24);
}
.wd-col-23 {
	width: calc((100% / 24) * 23);
}
.wd-col-22 {
	width: calc((100% / 24) * 22);
}
.wd-col-21 {
	width: calc((100% / 24) * 21);
}
.wd-col-20 {
	width: calc((100% / 24) * 20);
}
.wd-col-19 {
	width: calc((100% / 24) * 19);
}
.wd-col-18 {
	width: calc((100% / 24) * 18);
}
.wd-col-17 {
	width: calc((100% / 24) * 17);
}
.wd-col-16 {
	width: calc((100% / 24) * 16);
}
.wd-col-15 {
	width: calc((100% / 24) * 15);
}
.wd-col-14 {
	width: calc((100% / 24) * 14);
}
.wd-col-13 {
	width: calc((100% / 24) * 13);
}
.wd-col-12 {
	width: calc((100% / 24) * 12);
}
.wd-col-11 {
	width: calc((100% / 24) * 11);
}
.wd-col-10 {
	width: calc((100% / 24) * 10);
}
.wd-col-9 {
	width: calc((100% / 24) * 9);
}
.wd-col-8 {
	width: calc((100% / 24) * 8);
}
.wd-col-7 {
	width: calc((100% / 24) * 7);
}
.wd-col-6 {
	width: calc((100% / 24) * 6);
}
.wd-col-5 {
	width: calc((100% / 24) * 5);
}
.wd-col-4 {
	width: calc((100% / 24) * 4);
}
.wd-col-3 {
	width: calc((100% / 24) * 3);
}
.wd-col-2 {
	width: calc((100% / 24) * 2);
}
.wd-col-1 {
	width: calc((100% / 24) * 1);
}
.wd-offset-1 {
	margin-left: calc((100% / 24) * 1);
}
.wd-offset-2 {
	margin-left: calc((100% / 24) * 2);
}
.wd-offset-3 {
	margin-left: calc((100% / 24) * 3);
}
.wd-offset-4 {
	margin-left: calc((100% / 24) * 4);
}
.wd-offset-5 {
	margin-left: calc((100% / 24) * 5);
}
.wd-offset-6 {
	margin-left: calc((100% / 24) * 6);
}
.wd-offset-7 {
	margin-left: calc((100% / 24) * 7);
}
.wd-offset-8 {
	margin-left: calc((100% / 24) * 8);
}
.wd-offset-9 {
	margin-left: calc((100% / 24) * 9);
}
.wd-offset-10 {
	margin-left: calc((100% / 24) * 10);
}
.wd-offset-11 {
	margin-left: calc((100% / 24) * 11);
}
.wd-offset-12 {
	margin-left: calc((100% / 24) * 12);
}
.wd-offset-13 {
	margin-left: calc((100% / 24) * 13);
}
.wd-offset-14 {
	margin-left: calc((100% / 24) * 14);
}
.wd-offset-15 {
	margin-left: calc((100% / 24) * 15);
}
.wd-offset-16 {
	margin-left: calc((100% / 24) * 16);
}
.wd-offset-17 {
	margin-left: calc((100% / 24) * 17);
}
.wd-offset-18 {
	margin-left: calc((100% / 24) * 18);
}
.wd-offset-19 {
	margin-left: calc((100% / 24) * 19);
}
.wd-offset-20 {
	margin-left: calc((100% / 24) * 20);
}
.wd-offset-21 {
	margin-left: calc((100% / 24) * 21);
}
.wd-offset-22 {
	margin-left: calc((100% / 24) * 22);
}
.wd-offset-23 {
	margin-left: calc((100% / 24) * 23);
}
.wd-show {
	display: block !important;
}

.wd-hide {
	display: none !important;
}
/* 当浏览器的可视区域大于于1200px xl*/
@media screen and (min-width: 1200px) {
	html {
		font-size: 87.9px !important;
	}
	.wd-col-xl-24 {
		width: calc((100% / 24) * 24);
	}
	.wd-col-xl-23 {
		width: calc((100% / 24) * 23);
	}
	.wd-col-xl-22 {
		width: calc((100% / 24) * 22);
	}
	.wd-col-xl-21 {
		width: calc((100% / 24) * 21);
	}
	.wd-col-xl-20 {
		width: calc((100% / 24) * 20);
	}
	.wd-col-xl-19 {
		width: calc((100% / 24) * 19);
	}
	.wd-col-xl-18 {
		width: calc((100% / 24) * 18);
	}
	.wd-col-xl-17 {
		width: calc((100% / 24) * 17);
	}
	.wd-col-xl-16 {
		width: calc((100% / 24) * 16);
	}
	.wd-col-xl-15 {
		width: calc((100% / 24) * 15);
	}
	.wd-col-xl-14 {
		width: calc((100% / 24) * 14);
	}
	.wd-col-xl-13 {
		width: calc((100% / 24) * 13);
	}
	.wd-col-xl-12 {
		width: calc((100% / 24) * 12);
	}
	.wd-col-xl-11 {
		width: calc((100% / 24) * 11);
	}
	.wd-col-xl-10 {
		width: calc((100% / 24) * 10);
	}
	.wd-col-xl-9 {
		width: calc((100% / 24) * 9);
	}
	.wd-col-xl-8 {
		width: calc((100% / 24) * 8);
	}
	.wd-col-xl-7 {
		width: calc((100% / 24) * 7);
	}
	.wd-col-xl-6 {
		width: calc((100% / 24) * 6);
	}
	.wd-col-xl-5 {
		width: calc((100% / 24) * 5);
	}
	.wd-col-xl-4 {
		width: calc((100% / 24) * 4);
	}
	.wd-col-xl-3 {
		width: calc((100% / 24) * 3);
	}
	.wd-col-xl-2 {
		width: calc((100% / 24) * 2);
	}
	.wd-col-xl-1 {
		width: calc((100% / 24) * 1);
	}

	.wd-offset-xl-1 {
		margin-left: calc((100% / 24) * 1);
	}
	.wd-offset-xl-2 {
		margin-left: calc((100% / 24) * 2);
	}
	.wd-offset-xl-3 {
		margin-left: calc((100% / 24) * 3);
	}
	.wd-offset-xl-4 {
		margin-left: calc((100% / 24) * 4);
	}
	.wd-offset-xl-5 {
		margin-left: calc((100% / 24) * 5);
	}
	.wd-offset-xl-6 {
		margin-left: calc((100% / 24) * 6);
	}
	.wd-offset-xl-7 {
		margin-left: calc((100% / 24) * 7);
	}
	.wd-offset-xl-8 {
		margin-left: calc((100% / 24) * 8);
	}
	.wd-offset-xl-9 {
		margin-left: calc((100% / 24) * 9);
	}
	.wd-offset-xl-10 {
		margin-left: calc((100% / 24) * 10);
	}
	.wd-offset-xl-11 {
		margin-left: calc((100% / 24) * 11);
	}
	.wd-offset-xl-12 {
		margin-left: calc((100% / 24) * 12);
	}
	.wd-offset-xl-13 {
		margin-left: calc((100% / 24) * 13);
	}
	.wd-offset-xl-14 {
		margin-left: calc((100% / 24) * 14);
	}
	.wd-offset-xl-15 {
		margin-left: calc((100% / 24) * 15);
	}
	.wd-offset-xl-16 {
		margin-left: calc((100% / 24) * 16);
	}
	.wd-offset-xl-17 {
		margin-left: calc((100% / 24) * 17);
	}
	.wd-offset-xl-18 {
		margin-left: calc((100% / 24) * 18);
	}
	.wd-offset-xl-19 {
		margin-left: calc((100% / 24) * 19);
	}
	.wd-offset-xl-20 {
		margin-left: calc((100% / 24) * 20);
	}
	.wd-offset-xl-21 {
		margin-left: calc((100% / 24) * 21);
	}
	.wd-offset-xl-22 {
		margin-left: calc((100% / 24) * 22);
	}
	.wd-offset-xl-23 {
		margin-left: calc((100% / 24) * 23);
	}
	.wd-offset-xl-0 {
		margin-left: calc((100% / 24) * 0);
	}
	.wd-show-xl {
		display: block !important;
	}

	.wd-hide-xl {
		display: none !important;
	}
}

/* 当浏览器的可视区域小于1200px lg*/
@media screen and (max-width: 1200px) {
	.wd-col-lg-24 {
		width: calc((100% / 24) * 24);
	}
	.wd-col-lg-23 {
		width: calc((100% / 24) * 23);
	}
	.wd-col-lg-22 {
		width: calc((100% / 24) * 22);
	}
	.wd-col-lg-21 {
		width: calc((100% / 24) * 21);
	}
	.wd-col-lg-20 {
		width: calc((100% / 24) * 20);
	}
	.wd-col-lg-19 {
		width: calc((100% / 24) * 19);
	}
	.wd-col-lg-18 {
		width: calc((100% / 24) * 18);
	}
	.wd-col-lg-17 {
		width: calc((100% / 24) * 17);
	}
	.wd-col-lg-16 {
		width: calc((100% / 24) * 16);
	}
	.wd-col-lg-15 {
		width: calc((100% / 24) * 15);
	}
	.wd-col-lg-14 {
		width: calc((100% / 24) * 14);
	}
	.wd-col-lg-13 {
		width: calc((100% / 24) * 13);
	}
	.wd-col-lg-12 {
		width: calc((100% / 24) * 12);
	}
	.wd-col-lg-11 {
		width: calc((100% / 24) * 11);
	}
	.wd-col-lg-10 {
		width: calc((100% / 24) * 10);
	}
	.wd-col-lg-9 {
		width: calc((100% / 24) * 9);
	}
	.wd-col-lg-8 {
		width: calc((100% / 24) * 8);
	}
	.wd-col-lg-7 {
		width: calc((100% / 24) * 7);
	}
	.wd-col-lg-6 {
		width: calc((100% / 24) * 6);
	}
	.wd-col-lg-5 {
		width: calc((100% / 24) * 5);
	}
	.wd-col-lg-4 {
		width: calc((100% / 24) * 4);
	}
	.wd-col-lg-3 {
		width: calc((100% / 24) * 3);
	}
	.wd-col-lg-2 {
		width: calc((100% / 24) * 2);
	}
	.wd-col-lg-1 {
		width: calc((100% / 24) * 1);
	}

	.wd-offset-lg-1 {
		margin-left: calc((100% / 24) * 1);
	}
	.wd-offset-lg-2 {
		margin-left: calc((100% / 24) * 2);
	}
	.wd-offset-lg-3 {
		margin-left: calc((100% / 24) * 3);
	}
	.wd-offset-lg-4 {
		margin-left: calc((100% / 24) * 4);
	}
	.wd-offset-lg-5 {
		margin-left: calc((100% / 24) * 5);
	}
	.wd-offset-lg-6 {
		margin-left: calc((100% / 24) * 6);
	}
	.wd-offset-lg-7 {
		margin-left: calc((100% / 24) * 7);
	}
	.wd-offset-lg-8 {
		margin-left: calc((100% / 24) * 8);
	}
	.wd-offset-lg-9 {
		margin-left: calc((100% / 24) * 9);
	}
	.wd-offset-lg-10 {
		margin-left: calc((100% / 24) * 10);
	}
	.wd-offset-lg-11 {
		margin-left: calc((100% / 24) * 11);
	}
	.wd-offset-lg-12 {
		margin-left: calc((100% / 24) * 12);
	}
	.wd-offset-lg-13 {
		margin-left: calc((100% / 24) * 13);
	}
	.wd-offset-lg-14 {
		margin-left: calc((100% / 24) * 14);
	}
	.wd-offset-lg-15 {
		margin-left: calc((100% / 24) * 15);
	}
	.wd-offset-lg-16 {
		margin-left: calc((100% / 24) * 16);
	}
	.wd-offset-lg-17 {
		margin-left: calc((100% / 24) * 17);
	}
	.wd-offset-lg-18 {
		margin-left: calc((100% / 24) * 18);
	}
	.wd-offset-lg-19 {
		margin-left: calc((100% / 24) * 19);
	}
	.wd-offset-lg-20 {
		margin-left: calc((100% / 24) * 20);
	}
	.wd-offset-lg-21 {
		margin-left: calc((100% / 24) * 21);
	}
	.wd-offset-lg-22 {
		margin-left: calc((100% / 24) * 22);
	}
	.wd-offset-lg-23 {
		margin-left: calc((100% / 24) * 23);
	}
	.wd-offset-lg-0 {
		margin-left: calc((100% / 24) * 0);
	}
	.wd-show-lg {
		display: block !important;
	}

	.wd-hide-lg {
		display: none !important;
	}
}

/* 当浏览器的可视区域小于992px md*/
@media screen and (max-width: 992px) {
	.wd-col-md-24 {
		width: calc((100% / 24) * 24);
	}
	.wd-col-md-23 {
		width: calc((100% / 24) * 23);
	}
	.wd-col-md-22 {
		width: calc((100% / 24) * 22);
	}
	.wd-col-md-21 {
		width: calc((100% / 24) * 21);
	}
	.wd-col-md-20 {
		width: calc((100% / 24) * 20);
	}
	.wd-col-md-19 {
		width: calc((100% / 24) * 19);
	}
	.wd-col-md-18 {
		width: calc((100% / 24) * 18);
	}
	.wd-col-md-17 {
		width: calc((100% / 24) * 17);
	}
	.wd-col-md-16 {
		width: calc((100% / 24) * 16);
	}
	.wd-col-md-15 {
		width: calc((100% / 24) * 15);
	}
	.wd-col-md-14 {
		width: calc((100% / 24) * 14);
	}
	.wd-col-md-13 {
		width: calc((100% / 24) * 13);
	}
	.wd-col-md-12 {
		width: calc((100% / 24) * 12);
	}
	.wd-col-md-11 {
		width: calc((100% / 24) * 11);
	}
	.wd-col-md-10 {
		width: calc((100% / 24) * 10);
	}
	.wd-col-md-9 {
		width: calc((100% / 24) * 9);
	}
	.wd-col-md-8 {
		width: calc((100% / 24) * 8);
	}
	.wd-col-md-7 {
		width: calc((100% / 24) * 7);
	}
	.wd-col-md-6 {
		width: calc((100% / 24) * 6);
	}
	.wd-col-md-5 {
		width: calc((100% / 24) * 5);
	}
	.wd-col-md-4 {
		width: calc((100% / 24) * 4);
	}
	.wd-col-md-3 {
		width: calc((100% / 24) * 3);
	}
	.wd-col-md-2 {
		width: calc((100% / 24) * 2);
	}
	.wd-col-md-1 {
		width: calc((100% / 24) * 1);
	}

	.wd-offset-md-1 {
		margin-left: calc((100% / 24) * 1);
	}
	.wd-offset-md-2 {
		margin-left: calc((100% / 24) * 2);
	}
	.wd-offset-md-3 {
		margin-left: calc((100% / 24) * 3);
	}
	.wd-offset-md-4 {
		margin-left: calc((100% / 24) * 4);
	}
	.wd-offset-md-5 {
		margin-left: calc((100% / 24) * 5);
	}
	.wd-offset-md-6 {
		margin-left: calc((100% / 24) * 6);
	}
	.wd-offset-md-7 {
		margin-left: calc((100% / 24) * 7);
	}
	.wd-offset-md-8 {
		margin-left: calc((100% / 24) * 8);
	}
	.wd-offset-md-9 {
		margin-left: calc((100% / 24) * 9);
	}
	.wd-offset-md-10 {
		margin-left: calc((100% / 24) * 10);
	}
	.wd-offset-md-11 {
		margin-left: calc((100% / 24) * 11);
	}
	.wd-offset-md-12 {
		margin-left: calc((100% / 24) * 12);
	}
	.wd-offset-md-13 {
		margin-left: calc((100% / 24) * 13);
	}
	.wd-offset-md-14 {
		margin-left: calc((100% / 24) * 14);
	}
	.wd-offset-md-15 {
		margin-left: calc((100% / 24) * 15);
	}
	.wd-offset-md-16 {
		margin-left: calc((100% / 24) * 16);
	}
	.wd-offset-md-17 {
		margin-left: calc((100% / 24) * 17);
	}
	.wd-offset-md-18 {
		margin-left: calc((100% / 24) * 18);
	}
	.wd-offset-md-19 {
		margin-left: calc((100% / 24) * 19);
	}
	.wd-offset-md-20 {
		margin-left: calc((100% / 24) * 20);
	}
	.wd-offset-md-21 {
		margin-left: calc((100% / 24) * 21);
	}
	.wd-offset-md-22 {
		margin-left: calc((100% / 24) * 22);
	}
	.wd-offset-md-23 {
		margin-left: calc((100% / 24) * 23);
	}
	.wd-offset-md-0 {
		margin-left: calc((100% / 24) * 0);
	}
	.wd-show-md {
		display: block !important;
	}

	.wd-hide-md {
		display: none !important;
	}
}

/* 当浏览器的可视区域小于768px sm*/
@media screen and (max-width: 768px) {
	.wd-col-sm-24 {
		width: calc((100% / 24) * 24);
	}
	.wd-col-sm-23 {
		width: calc((100% / 24) * 23);
	}
	.wd-col-sm-22 {
		width: calc((100% / 24) * 22);
	}
	.wd-col-sm-21 {
		width: calc((100% / 24) * 21);
	}
	.wd-col-sm-20 {
		width: calc((100% / 24) * 20);
	}
	.wd-col-sm-19 {
		width: calc((100% / 24) * 19);
	}
	.wd-col-sm-18 {
		width: calc((100% / 24) * 18);
	}
	.wd-col-sm-17 {
		width: calc((100% / 24) * 17);
	}
	.wd-col-sm-16 {
		width: calc((100% / 24) * 16);
	}
	.wd-col-sm-15 {
		width: calc((100% / 24) * 15);
	}
	.wd-col-sm-14 {
		width: calc((100% / 24) * 14);
	}
	.wd-col-sm-13 {
		width: calc((100% / 24) * 13);
	}
	.wd-col-sm-12 {
		width: calc((100% / 24) * 12);
	}
	.wd-col-sm-11 {
		width: calc((100% / 24) * 11);
	}
	.wd-col-sm-10 {
		width: calc((100% / 24) * 10);
	}
	.wd-col-sm-9 {
		width: calc((100% / 24) * 9);
	}
	.wd-col-sm-8 {
		width: calc((100% / 24) * 8);
	}
	.wd-col-sm-7 {
		width: calc((100% / 24) * 7);
	}
	.wd-col-sm-6 {
		width: calc((100% / 24) * 6);
	}
	.wd-col-sm-5 {
		width: calc((100% / 24) * 5);
	}
	.wd-col-sm-4 {
		width: calc((100% / 24) * 4);
	}
	.wd-col-sm-3 {
		width: calc((100% / 24) * 3);
	}
	.wd-col-sm-2 {
		width: calc((100% / 24) * 2);
	}
	.wd-col-sm-1 {
		width: calc((100% / 24) * 1);
	}

	.wd-offset-sm-1 {
		margin-left: calc((100% / 24) * 1);
	}
	.wd-offset-sm-2 {
		margin-left: calc((100% / 24) * 2);
	}
	.wd-offset-sm-3 {
		margin-left: calc((100% / 24) * 3);
	}
	.wd-offset-sm-4 {
		margin-left: calc((100% / 24) * 4);
	}
	.wd-offset-sm-5 {
		margin-left: calc((100% / 24) * 5);
	}
	.wd-offset-sm-6 {
		margin-left: calc((100% / 24) * 6);
	}
	.wd-offset-sm-7 {
		margin-left: calc((100% / 24) * 7);
	}
	.wd-offset-sm-8 {
		margin-left: calc((100% / 24) * 8);
	}
	.wd-offset-sm-9 {
		margin-left: calc((100% / 24) * 9);
	}
	.wd-offset-sm-10 {
		margin-left: calc((100% / 24) * 10);
	}
	.wd-offset-sm-11 {
		margin-left: calc((100% / 24) * 11);
	}
	.wd-offset-sm-12 {
		margin-left: calc((100% / 24) * 12);
	}
	.wd-offset-sm-13 {
		margin-left: calc((100% / 24) * 13);
	}
	.wd-offset-sm-14 {
		margin-left: calc((100% / 24) * 14);
	}
	.wd-offset-sm-15 {
		margin-left: calc((100% / 24) * 15);
	}
	.wd-offset-sm-16 {
		margin-left: calc((100% / 24) * 16);
	}
	.wd-offset-sm-17 {
		margin-left: calc((100% / 24) * 17);
	}
	.wd-offset-sm-18 {
		margin-left: calc((100% / 24) * 18);
	}
	.wd-offset-sm-19 {
		margin-left: calc((100% / 24) * 19);
	}
	.wd-offset-sm-20 {
		margin-left: calc((100% / 24) * 20);
	}
	.wd-offset-sm-21 {
		margin-left: calc((100% / 24) * 21);
	}
	.wd-offset-sm-22 {
		margin-left: calc((100% / 24) * 22);
	}
	.wd-offset-sm-23 {
		margin-left: calc((100% / 24) * 23);
	}
	.wd-offset-sm-0 {
		margin-left: calc((100% / 24) * 0);
	}
	.wd-show-sm {
		display: block !important;
	}

	.wd-hide-sm {
		display: none !important;
	}
}
miao_zz
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vux-lib-flexible:这是一个集成vux和淘宝移动端自适应屏幕解决方案
05-18
本脚手架参考大神的方案： 1.主要是根据淘宝的高清解决方案lib-flexible和vux组件结合，按照这个脚手架，设计出750px稿子（这个可以商量，webpack里面有配置可以改的），你在布局中直接使用px，webpack会自动转化rem，再根据淘宝的自适应方案达到自适应的效果。 2.vux组件使用的是px在很多情况下显示效果不好，此方案也是一种解决办法
vue打包的时候自动将px转成rem的操作方法
12-04
px2rem-loader 需要与 flexible 配合使用，不然px2rem仅仅只是转成rem却不会设置rem的信息 安装 flexible npm i lib-flexible -S 然后在main.js中引入 import 'lib-flexible/flexible' 直接引入的文件需要有优先与引用的组件 安装px2rem-loader npm i px2rem-loader -D 在build的utils.js中找到cssLoader添加一下代码 const px2remLoader = { loader: 'px2rem-loader', option: { re
vue3+vite+js 实现移动端，PC端响应式布局
最新发布
半梅芒果干的博客
05-01 824
① 执行以下两个命令②main.js文件引用③ 根目录新建一个到这里就安装完成了，重新运行项目就可以在浏览器看到变化了。
mars-flexible:移动端自适应方案
04-29
mars-flexible 移动端自适应库，执行这个 js 后，会在 html（也就是document.documentElement）上增加一个 data-dpr 属性，以及 font-size 样式。之后页面中的元素，都可以用 rem 单位来设置。html 上的 font-size 就是 rem 的基准像素。 该库主要做了两件事 给元素添加 font-size 属性，并且动态改写 font-size 的值 给元素添加 data-dpr 属性，并且动态改写 data-dpr 的值 对支持0.5px border 的添加 hairlines 类名 建议将该库直接做内联处理 Install $ npm install mars-flexible --save Usage import 'mars-flexible'; 参考
vue自适应pc端界面（ lib-flexible ）
m0_53669317的博客
06-19 2209
文件路径：node_moudles/lib-flexible/flexible.js。
rem响应式布局-自动将px转换为rem--px2rem插件的使用
ZhouXin_0819的博客
05-06 1814
在项目中我们可能要做适配根据不同分辨率做相应的页面处理当你在项目中采用rem做响应式页面的时候，如果代码里面写的是rem单位的话，会不好判断各种距离、宽高的具体数值，下面介绍一款插件：px2rem，使用此插件可以在代码里依然写px，启动项目会自动将px单位转换为可响应的rem单位。
利用flexible.js和sass解决移动端不同分辨率下屏幕自适应、字体大小问题
qq_60654563的博客
07-18 671
利用flexible.js和sass解决移动端不同分辨率下屏幕自适应、字体大小问题
vue PC+移动端 自适应布局
zhao1239902的博客
02-16 1万+
之前自己接了个项目 PC+移动端 自动适配显示，因为手机端需要自适应，pc也是需要自适应 项目里 PC用的1920px，移动端用的375px，使用媒体查询适配显示 一、环境 使用lib-flexible,为html上添加 动态的font-size（屏幕宽度/10），根据宽度而变化 例如浏览器宽度为750px，则会自动设置为75px， 1rem就=75px 使用px2rem-loader，自动将css的px转成rem， 两个插件配合使用， 就能做到自适应大小 二、步骤 2.1 安装 lib-fl
移动端适配解决方案
weixin_46045382的博客
10-20 414
在rem基本知识点的时候已经标红了一个重点知识，那就试1rem = 1HTML字号大小，那么如果我将在不同屏幕分辨率的情况下设置不同的HTML根节点大小，是不是就能实现==屏幕宽度不同，网页元素尺寸不同（等比缩放）==了呢？：媒体查询能够检测视口的宽度，既然检测到了视口不同的宽度，那么我们就可以根据不同的视口宽度设置不同的HTML字号大小了。查看设计稿宽度-》确定参考设备宽度（视口宽度）-》确定vw尺寸（1/100视口宽度）看完上面基于rem和vw、vh的讲解，不知道你对移动端适配是不是有了基本掌握呢？
大屏自适应/适配方案【详解】（echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem）
热门推荐
朝阳39的博客
08-30 1万+
大屏自适应的核心目标有： 字体大小随屏幕尺寸自适应变化 详见下文 自动撑满全屏 可参考我的博客 弹性布局（使用 css 的flex布局） 可参考我的编程笔记 使用flexible.js + rem实现字体自适应 flexible.js用于根据屏幕尺寸变化动态调整根元素的字体大小。 rem（font size of the root element）则是相对于根元素的字体大小单位。 具体用法如下： 1.新建flexible.js src\pages\AIcall\utils\flexi
关于amfe-flexible + postcss-px2rem在华为部分机型出现的不兼容问题替代方案:px-to-viewport
StayInCat的博客
09-29 1120
最近在工作中发现华为部分机型遇到一个移动端适配的兼容性问题 场景： 华为部分机型的微信浏览器 不兼容的适配方案：amfe-flexible + postcss-px2rem 具体表现： 并没有根据视图宽度动态适配，且目前只出现在微信浏览器，华为内置浏览器表现正常 不兼容原因分析： 我想 px to rem 这一部分一定是执行的，且现代浏览器rem不至于失效或不支持，可以排除这类问题，那么问题大概率出在amfe-flexible上。 amfe-flexible 做了什么： 在分析问题前我们先来看看 amfe-
基于vue-cli配置lib-flexible + rem实现移动端自适应
08-28
Lib-Flexible是一个非常流行的移动端自适应解决方案，通过使用Rem单位来实现响应式设计。下面将详细介绍如何基于Vue-CLI配置Lib-Flexible + Rem实现移动端自适应。 一、安装Lib-Flexible 首先，需要在项目中安装...
详解基于vue-cli配置移动端自适应
08-28
本文主要介绍了基于vue-cli配置移动端自适应的方法，主要涉及到三个方面：lib-flexible库的安装和使用、px到rem的转换、vue-cli配置的修改。 首先，在项目中安装lib-flexible库，使用命令`npm i lib-flexible --...
vue使用rem实现 移动端屏幕适配
10-17
主要介绍了vue使用rem实现 移动端屏幕适配的相关知识，通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下
pc端使用lib-flexible和postcss-pxtorem实现自适应
weixin_44738844的博客
06-12 1153
做了一个管理系统，要实现自适应不同的分辨率。
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
xiaoqin5的博客
10-10 1671
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
pc端和移动端自适应, 做响应式网页
luoxiaonuan_hi的博客
07-21 8196
一套代码能够兼容适配不同的屏幕设备，内容不变布局效果变了，这样的网页就是响应式网页在开发中要想实现项目的响应式，建议使用媒体查询，在不同的宽度下显示不同的样式，1920下就是pc端的响应式，宽度设置的足够小可以匹配移动端的响应式。...
淘宝flexible.js+rem适配pc端
qq_38210427的博客
06-15 699
1、引入flexible.js文件：// 这里默认是10等份，手动改为24，此时1rem=1920/24px即80px。（设计稿是1920px的）2、cssrem的Root Font Size改为80，修改完重启vscode。
vue项目中使用postcss-px2rem的方法总结
全栈小菜鸟
03-08 4505
vue项目中使用postcss-px2rem的2种方法 在项目中为了屏幕适配，经常会用到rem，postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方法适用于使用cli2脚手架搭建的项目,现在好多数项目使用cli3搭建,我在后边的文章中增加了对cli3项目自适应的配置.) 1.安装 npm i postcss-px2rem --save -dev 2.设置 1）.找到项目根目录下的.postcssrc文件 module.exports = { "plu
pc端使用 lib-flexible 和 postcss-px2rem
09-09
关于在PC端使用lib-flexible和postcss-px2rem，我可以给你一些简要的说明。 lib-flexible是一个用于移动端适配的库，它可以根据设备的屏幕大小动态调整HTML的字体大小，以实现页面元素的自适应。在PC端使用lib-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值