一、

使用场景：有适配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';

}

}

二、

做完的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：

三、

四、

常见电脑屏幕分辨率

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实现移动端页面按手机屏幕分辨率自动缩放的最强代码

var phoneWidth = parseInt(window.screen.width);

var phoneHeight = parseInt(window.screen.height);

var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率

var ua = navigator.userAgent;

if (/Android (\d+\.\d+)/.test(ua)) {

var version = parseFloat(RegExp.$1);

// andriod 2.3

if (version > 2.3) {

document.write('');

// andriod 2.3以上

} else {

document.write('');

}

// 其他系统

} else {

document.write('');

}

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

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

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

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