vue一套代码适应移动端，pc端

一、

使用场景：有适配pc端改为适配pc端和移动端，使用2套css
代码实现App.vue

created: function () {
    if(document.documentElement.clientWidth > 640){
        require('./style/index.：');
        this.plaform = 'pc';
    }else{
        require('./style/mobile.scss');
        this.plaform = 'mobile';
    }
}

注意：
为2套css分别指定不同的父class
比如说pc端 css为pc.scss 父类为 .pc 移动端 mobile.scss 父类为 .mobile
摘自：https://blog.csdn.net/qq_27064559/article/details/96324121?utm_medium=distribute.pc_relevant.none-task-blog-baidulandingword-6&spm=1001.2101.3001.4242

二、

做完的pc项目要求兼容移动端，常规操作的话是新做一个webapp后再来回跳转，
当前pc项目没有太多的交互和复杂的页面，所以决定在一个项目里进行兼容适配
1.新建两个组件，pc端页面组件，m端页面组件

image.png

2.页面写个方法判断是pc端还是移动端（可在全局写）

methods: {
    //判断
      _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;
      }
  },
created(){
    if (this._isMobile()) {
        //手机端
        this.ismOrpc = 'Moperation'
        //设置rem
        window.onload = function(){
            getRem(750,100)
        };
        window.onresize = function(){
            getRem(750,100)
        };
        function getRem(pwidth,prem){
            var html = document.getElementsByTagName("html")[0];
            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
            html.style.fontSize = oWidth/pwidth*prem + "px";
        }
        
      } else {
        //pc端
        this.ismOrpc = 'PCoperation'
      }
}

3.引入组件

import PCoperation from '@/components/pc/PCoperation'
import Moperation from '@/components/m/Moperation'

components: {
  footerInfo,
  PCoperation,
  Moperation
},

4.data设置初始值，根据值显示不同组件

js:
data(){
    return{
      ismOrpc:'PCoperation'//默认展示pc
    }
},
html：

三、

阿里高清解决方案：
https://www.jianshu.com/p/985d26b40199

https://www.jianshu.com/p/07669cb3e7c5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

四、

常见电脑屏幕分辨率
1024600 （常见8.9寸电脑使用）
1024768（常用10.4、12.1、14.1、15寸电脑使用）4:3
12801024（常用14.1、15寸电脑使用）5:4
1600 * 900 16:9 (非主流)
14401050（常用15、16.1寸电脑使用）4:3
16001200（常用15、16.1寸电脑使用）4:3
1280800（常见10.8、12.1、15.4寸电脑使用）16:10
1366768（常见15.2寸电脑使用）15:10 （主流）
1280854（不常见）16:9
1440900（仅苹果17寸电脑使用）16:10
16001024（不常见）14:9
16801050（常见15.4、20寸电脑使用）16:10
19201080 16:9 （主流）
1920*1200（常见20寸电脑使用）16:10

PC端响应式媒体断点：

@media (min-width: 1024px){
   body{font-size: 18px}
   } /*>=1024的设备*/

   @media (min-width: 1100px) {
   body{font-size: 20px}
   } /*>=1100的设备*/
   @media (min-width: 1280px) {
   body{font-size: 22px;}
   } /*>=1280的设备*/

   @media (min-width: 1366px) {

   body{font-size: 24px;}
   }  

   @media (min-width: 1440px) {
   body{font-size: 25px !important;}
   } 

   @media (min-width: 1680px) {
   body{font-size: 28px;}
   } 
   @media (min-width: 1920px) {
   body{font-size: 33px;}
   }

vue rem适配

项目目录下新建 vue.config.js内容如下

module.exports = {
  productionSourceMap: false,
  lintOnSave: false,
  publicPath: './',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 75, // 换算的基数，设计稿宽度的1/10
            selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
            propList: ['*']//需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
          })
        ]
      }
    }
  }
}

npm i postcss-pxtorem lib-flexible
main.js 引入 import 'lib-flexible/flexible.js'

然后重启项目如果起不来删了node_modules 重新 npm install
css 样式写的时候,在750的设置图下，量多少写多少，单位用px就行，不用写rem。这种方式只适用于 vue-cli 3.0版本以上，3.0以下的需要在webpack里配置

WechatIMG6d380bdd611af70a28976726ada74edb.png

WechatIMG21131c4831157f030ab0129b94578d6b.png

WechatIMG6dc0de402e30e2e19be236a832daa147.png

WechatIMG0f74ff33b865ff56438f241658f8bcfc.png

WechatIMG9082d55f33809eec26642319c83fb676.png

五、把pc端的网页刚好缩放到手机端

今天做了个pc的页面，看了别人的网站在手机端能把pc端的网页刚好缩放到手机端，看着很舒服。

于是想把自己的页面也这样搞一下，刚开始，想到的是利用css3的缩放来做，想的是当屏幕尺寸改变时缩放整个页面，这样顺便写了个代码，但是在手机端却没有效果，然后仔细一想，手机端屏幕是不会变化的，根本无法触发window.onresize方法，再说，这样做了之后，在pc端改变屏幕尺寸后，页面是跟着缩放的，但是别人的网站在pc端改变屏幕尺寸时，是不会变化的，所以这样做肯定是错误的。

然后开始百度，看到一条评论，只需要把下边这段代码去掉就行了

试了一下，在页面中写的一个width=1200px的元素，能够恰到其份的适配下来！！！缩放的刚刚好

下面来了解一下meta标签中这些值的含义：

width=device-width：表示布局viewport的值是设备的宽度（也可以是特定的viewport值）
initial-scale=1.0：设置页面的初始缩放比例
minimum-scale=1.0：设置页面的最小缩放比例
maximum-scale=1.0：设置页面的最大缩放比例
user-scalable=no：设置用户是否可以缩放操作
移动端默认会缩放大尺寸的页面的，当我们把上述代码去掉之后，就会随着移动端缩放的比例走，而且还可以自由放大。

下面是另一篇文章会对meta标签加深理解：号称---------JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码

上面代码是专门针对移动端设置的meta标签缩放比例，根据设计图宽度的不同而设置的（这样的设置并不适合我的情况，因为这样设置了之后，在手机端是不能缩放的，因为上面代码写死了缩放比例）。

然后自己又试了试，把元素尺寸写的更大一些，当我写1800px时，手机端到450px时就不能再缩小了，当我写1200px时，手机端到300px就不能再缩小了，所以手机缩放也有一定的极限值，

我暂且认定手机端能够将大尺寸元素缩小4倍。那么，一般的手机不会低于300px；那么一般手机就能够把1200px的元素完好缩放到手机上，终于明白了为什么大多数设计图，固定尺寸为1200px，原来是这样的道理。

那么，我们要向将pc端的页面能够在手机端完好缩放，我们就需要将pc端的能容宽度固定在一个值之内，我选择将内容装在1200px的元素内，这样就可以让pc端网页在移动端完好缩放了。

摘自：https://www.cnblogs.com/fqh123/p/11723320.html

vue一套代码适应移动端，pc端

一、

二、

三、

四、

vue rem适配

五、把pc端的网页刚好缩放到手机端

你可能感兴趣的:(vue一套代码适应移动端，pc端)