我的需求是 pc端所有的页面和移动端的登录页,首页 都写在一个项目里
这时候就需要我在登录的时候判断是什么设备 然后跳到相应的页面 采用不同的样式
========================================================
看到后台有小伙伴留言说不知道具体的写在那个文件里 所以决定更新一波,这次写详细点,希望可以更好的帮助到大家
下面这个是我整个项目的目录 ,另外稍微介绍下这个项目
采用vscode 编辑器编码 vue-cli脚手架搭建
node环境下载依赖 结合webpack 采用vux对数据进行管理
如果是手机端的话 我要采用rem布局 设计稿是640px的标准
如果是pc端的话 我需要页面自适应 设计稿是宽1920px的标准 并且当电脑屏幕尺寸小于1024px(一般来讲最小的电脑尺寸就是1024px),就不让页面继续缩小了 否则样式错乱,影响用户体验.
这个是我要对设备进行判断
上面是我分开截取给大家说明的
完整的代码 上图片 我写在了js/rem.js文件中
下面放上所有代码 方便大家使用 希望可以对大家有帮助!
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
// alert('手机端')
var abc = document.documentElement.clientWidth;
var bl = abc/640//设计稿的宽度
var fontSize = 100*bl
document.documentElement.style.fontSize = fontSize + "px"
}else{
// alert('PC端')
var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight; // 当前窗口的高度
var wW = window.innerWidth; // 当前窗口的宽度
var rem
if(wW <= 1024) {
rem = 1024 * whdef;
} else {
rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
}
$('html').css('font-size', rem + "px");
$(window).resize(function() // 绑定到窗口的这个事件中
{
var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight; // 当前窗口的高度
var wW = window.innerWidth; // 当前窗口的宽度
if(wW <= 1024) {
rem = 1024 * whdef;
} else {
rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
}
$('html').css('font-size', rem + "px");
// var H = document.documentElement.scrollHeight;
// $('html').height(H);
});
}
喜欢的话 点个小心心哦!
