admin管理员组文章数量:1130349
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超出滑动
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超出滑动
版权声明：本文标题：网页自适应rem浏览器窗口缩放内容错乱 禁止缩放vue 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1755023237a2754432.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论