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最外层写上   

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

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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue