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

60 阅读 0 评论 40 点赞

我是靠谱客的博主凶狠雨，最近开发中收集的这篇文章主要介绍网页自适应 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.浏览器缩放问题

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

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">

但是pc并没什么用 vue里的话是<meta name="viewport" content="width=device-width,initial-scale=1.0">，把后面两句在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最外层写上