前言
作为开发者，开发H5页面，或其余手机端网页，咱们会司空见惯的关上F12 调到手机模式下进行预览调试，失常状况下用户会应用手机关上该我的项目，所以咱们不太会思考挪动端我的项目在PC分辨率下的内容显示
当领导要求，PC关上显示和挪动端一样的成果，不压缩不舒展，居中显示，这种状况咱们应该怎么做呢?
步骤
此办法基于挪动端应用vue开发 rem适配
介绍办法前默认大家vue我的项目已搭完且已实现rem适配，要实现pc端的适配
1). 第一步创立一个js文件，并在main.js中引入
2). 第二步，咱们要判断客户所处的环境为PC端还是挪动端，只有在PC环境下应用咱们的办法进行非凡的适配，先写一个函数检测环境
function isMobile() { let flag = navigator.userAgent.match( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i ) return flag}3). 第三步，设置一个函数，动静批改咱们的根节点字体大小
// 基准大小const baseSize = 37.5 // 留神此值要与 postcss.config.js 文件中的 rootValue保持一致// 设置 rem 函数function setRem() { // 以后页面宽度绝对于 375宽的缩放比例，可依据本人须要批改,个别设计稿都是宽750(图不便能够拿到设计图后改过来)。 const scale = document.documentElement.clientWidth / 375 // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可依据理论业务需要调整） document.documentElement.style.fontSize = baseSize * Math.min(scale, 1) + 'px'}4). 第四步，初始化和窗口扭转时判断环境并调用函数
// 初始化!isMobile() && setRem()// 扭转窗口大小时从新设置 remwindow.onresize = function() { !isMobile() && setRem()}成果：
留神：
一些交互操作，例如弹窗或引入的第三方ui组件，可能会呈现地位跑偏或弹窗布满全屏，
这种状况是因为当咱们在挪动端开发时很多的款式100%，相对定位这些问题，在切换到pc时窗口产生了变动，呈现这种状况独自对款式做一下解决，写相对定位时听从标准给最近发父元素设置绝对定位尽量不挂靠在body下，或设置body和界面宽度统一......针对不同的款式做不同的解决
残缺代码：
function isMobile() { let flag = navigator.userAgent.match( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i ) return flag}// 基准大小const baseSize = 37.5 // 留神此值要与 postcss.config.js 文件中的 rootValue保持一致// 设置 rem 函数function setRem() { // 以后页面宽度绝对于 375宽的缩放比例，可依据本人须要批改,个别设计稿都是宽750(图不便能够拿到设计图后改过来)。 const scale = document.documentElement.clientWidth / 375 // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可依据理论业务需要调整） document.documentElement.style.fontSize = baseSize * Math.min(scale, 1) + 'px'}// 初始化!isMobile() && setRem()// 扭转窗口大小时从新设置 remwindow.onresize = function() { !isMobile() && setRem()}