网页自适应 rem 浏览器窗口缩放内容错乱 禁止缩放 vue

1.rem

rem都知道,是根据跟元素大小更改,所以我们一般会用这个来适用各种屏幕,毕竟是按照比例来的,还是挺不错的

但是现在pc端ui设计一般都是1920X不确定高度,高度好说都是有多高就多高,宽度1920,多出的就是为了适用,一般主要内容是1200的宽度。

在vue里搭建好之后就新建一个rem.js的文件夹,里面写上这样

! function(n) {
	            var e = n.document,
		    t = e.documentElement,
		    i = 1200,
		    d = i / 100,
		    o = "orientationchange" in n ? "orientationchange" : "resize",
		    a = function() {
			    var n = t.clientWidth || 600;
			    n > 1200 && (n = 1200);
			    t.style.fontSize = 1200 / d + "px"
		    };
	            e.addEventListener && (n.addEventListener(o, a, !1),                     
                e.addEventListener("DOMContentLoaded", a, !1))

}(window);

然后在main.js里引入

import './Vuex/rem'   //我是项目里用了vuex,就把这个方vuex文件夹里了

然后在写的时候元素宽高除以100就是了,比如你现在元素宽1200px,用这个就是12rem

当然上面的n和1200是能改的,看你们ui啥情况了,移动端也可以,我们ui移动用的375,但是不好算,ui给的网站能调,改成了750,上面的n也要改成750,这样也是100的比例

2.浏览器缩放问题

其实移动端也遇见过一些网页,当你点输入框的时候就会放大缩小,样式错乱,就需要这样一行代码,写在里

但是pc并没什么用       vue里的话是,把后面两句在index.html里加上就可以了。

 

但是pc不生效,我找了一些网上了方法,原生js控制,感觉有点麻烦,然后就想到了上面rem的那一串代码就改了一下

! function(n) {
	            var e = n.document,
		    t = e.documentElement,
		    i = 1200,
		    d = i / 100,
		    o = "orientationchange" in n ? "orientationchange" : "resize",
		    a = function() {
			//     var n = t.clientWidth || 600;
			//     n > 1200 && (n = 1200);
			    t.style.fontSize = 1200 / d + "px"
		    };
	            e.addEventListener && (n.addEventListener(o, a, !1), 
                e.addEventListener("DOMContentLoaded", a, !1))

}(window);

注释的地方就是需要删掉的,把下一行的n改成1200,直接写死,就是适应1200,再小就不管了。

不再适应,这样就不挤了,因为只是用在pc端,也没什么影响

或者绑上面那个||600g改成||1200也可以

然后在index最外层写上   

{min-width:1200px;overflow:auto}

这个就是写最大1200px超出滑动

你可能感兴趣的:(vue,vue,rem,自适应,浏览器缩放)