vue-rem - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

index.js

		@@ -1,14 +0,22 @@
		//setRem函数的主要功能是动态执行设置根目录的fontSize这样就相当于动态设置了REM
		//design表示设计尺寸,size表示的是缩放比例尺,比如size = 100时表示实际使用尺寸缩小100倍,比如设计尺寸的750px,这个时候我们就写成7.5rem
		//minWidth表示浏览器最小的宽度尺寸.当窗口小于该尺寸时,不再缩放,
		//三个输入项均为纯数字结构
		//该模块导出的函数执行完后,将会产生如下输出项:
		//#1对根字体大小尺寸设置,便于后面全部使用rem
		//#2对body设置了dpr属性,我们可以根据这个尺寸来选择不同的图片质量应对不同的高清或普通屏幕的显示效果
		//#3对网页的最小尺寸进行了约束,小于该尺寸时,dom元素不再根据窗口大小自适应
		//####注意该模块仅能在body元素加载后插入,否则将报错
		//this.$rule.dpr能获取到当前的设备dpr
		//this.$rule.set()就会主动刷新更改rem
		//this.$rule.rem
		//this.$rule.px()转化rem尺寸到px尺寸
		/*
		setRem函数的主要功能是动态执行设置根目录的fontSize这样就相当于动态设置了REM
		design表示设计尺寸,size表示的是缩放比例尺,比如size = 100时表示实际使用尺寸缩小100倍,比如设计尺寸的750px,这个时候我们就写成7.5rem
		minWidth表示浏览器最小的宽度尺寸.当窗口小于该尺寸时,不再缩放,
		三个输入项均为纯数字结构
		该模块导出的函数执行完后,将会产生如下输出项:
		#1对根字体大小尺寸设置,便于后面全部使用rem
		#2对body设置了dpr属性,我们可以根据这个尺寸来选择不同的图片质量应对不同的高清或普通屏幕的显示效果
		#3对网页的最小尺寸进行了约束,小于该尺寸时,dom元素不再根据窗口大小自适应
		####注意该模块仅能在body元素加载后插入,否则将报错
		import rem from 'vue-rem'
		Vue.use(rem, {
		design: 750,
		size: 100,
		minWidth:700
		})
		this.$size.set()立即重新设置rem
		this.$size.px(x)将x转化为px尺寸,方便有些组件没有对rem兼容
		this.$size.dpr获取当前设备的dpr
		this.$size.rem获取当前设备的根font-size
		*/

		@@ -20,8 +28,6 @@
		this.size = size \|\| 100
		this.minWidth = minWidth \|\| 800
		this.minWidth = minWidth \|\| 300
		}
		set() {
		console.log('do')
		console.log(this)
		document.getElementsByTagName('body')[0].style.minWidth = this.minWitdh + 'px'
		set () {
		document.getElementsByTagName('body')[0].style.minWidth = this.minWidth + 'px'
		const dpr = window.devicePixelRatio; //读取设备的dpr用于后面的css尺寸缩放为物理尺寸
		@@ -53,9 +59,10 @@ localStorage.dpr = dpr
		init() {
		console.log('init')
		window.onresize = this.set.bind(this);
		window.onpageshow = this.set.bind(this);
		window.onload = this.set.bind(this);
		this.set()
		window.onresize = this.set.bind(this)
		window.onpageshow = this.set.bind(this)
		window.onload = this.set.bind(this)
		window.onorientationchange = this.set.bind(this)
		}
		px(rem) {
		rem = rem \|\| 1
		return this.rem * rem
		@@ -68,6 +75,5 @@ }
		rule.init()
		Vue.prototype.$rule = rule
		Vue.prototype.$size = rule
		}
		}

		export default vueRem

package.json

		{
		"name": "vue-rem",
		"version": "1.0.1",
		"version": "1.0.2",
		"description": "",
		@@ -5,0 +5,0 @@ "main": "index.js",

vue-rem - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics