前言作为开发者，在开发H5页面或者其他移动端网页时，我们通常会打开F12切换到手机模式进行预览调试。一般情况下，用户都会用手机打开这个项目，所以对于PC分辨率下移动端项目的内容展示，我们没有过多考虑。领导一问，PC端打开显示和移动端一样的效果，没有压缩也没有拉伸，显示在中央。在这种情况下我们应该怎么办？步骤本方法基于移动端使用vue适配rem的介绍。默认大家的vue项目已经搭建完成，rem适配完成。实现PC端适配1).第一步是创建一个js文件并将其添加到main.js文件中。js介绍2）。第二步，我们需要判断客户端的环境是pc还是mobile，只有在pc环境才使用我们的方法进行特殊适配，先写一个检测环境的函数functionisMobile(){letflag=navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|WindowsPhone)/i)返回标志}3).第三步，设置一个函数，动态修改我们根节点的字体大小//basesizeconstbaseSize=37.5//注意这个值必须和postcss.config.js文件中的rootValue保持一致//setremfunctionfunctionsetRem(){//当前页面宽度相对375宽度的缩放比例，可以根据自己的需要修改。一般设计稿为750宽（拿到设计图后可以改，方便）。constscale=document.documentElement.clientWidth/375//设置页面根节点的字体大小（"Math.min(scale,2)"表示最大放大倍数为2，可根据实际调整业务需求）document.documentElement.style.fontSize=baseSize*Math.min(scale,1)+'px'}4)。第四步判断环境，在初始化和窗口变化时调用函数//initialization!isMobile()&&setRem()//当改变窗口大小时Re-setremwindow.onresize=function(){!isMobile()&&setRem()}作用：注意：一些交互操作，比如弹窗或者导入第三方ui组件，可能会导致位置偏移或者弹窗占满整个屏幕，这种情况是因为我们开发的时候移动端，很多款式都是100%，这些问题绝对定位。切换到PC时，窗口发生了变化。当出现这种情况时，我们需要单独处理样式。按照规范，给最新帖子的父元素设置相对定位，尽量不要锚定在body下面，或者设置body和界面的宽度一样。。。针对不同的样式做不同的处理完成代码：函数isMobile(){让标志=导航器。userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|WindowsPhone)/i)返回标志}//BasesizeconstbaseSize=37.5//注意这个值要和postcss.config.js文件中的rootValue一致//setremfunctionfunctionsetRem(){//当前页面宽度相对的缩放比例到375宽度，大家可以根据自己的需要修改。一般设计稿是750宽（拿到设计图后可以改，方便点）。constscale=document.documentElement.clientWidth/375//设置页面根节点的字体大小（"Math.min(scale,2)"表示最大放大倍数为2，可根据实际调整业务需求）document.documentElement.style.fontSize=baseSize*Math.min(scale,1)+'px'}//Initialize!isMobile()&&setRem()//Resetremwindow.onresize=function(){!isMobile()&&setRem()}
