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寸电脑使用)
1024
768(常用10.4、12.1、14.1、15寸电脑使用)4:3
12801024(常用14.1、15寸电脑使用)5:4
1600 * 900 16:9 (非主流)
1440
1050(常用15、16.1寸电脑使用)4:3
16001200(常用15、16.1寸电脑使用)4:3
1280
800(常见10.8、12.1、15.4寸电脑使用)16:10
1366768(常见15.2寸电脑使用)15:10 (主流)
1280
854(不常见)16:9
1440900(仅苹果17寸电脑使用)16:10
1600
1024(不常见)14:9
16801050(常见15.4、20寸电脑使用)16:10
1920
1080 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适配

  1. 项目目录下 新建 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`等,`*`表示全部
          })
        ]
      }
    }
  }
}
  1. npm i postcss-pxtorem lib-flexible

  2. 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端)