vue项目屏幕自适应_vue项目PC端随屏幕分辨率与窗口大小自适应（五步完成，吐血干货）...

又见面了鸭！

前言：这是用webpack创建的项目

【壹】不同屏幕分辨率效果展示：

A、1920*1080分辨率全屏显示的情况下：

image.png

B、1600*900分辨率全屏显示的情况下：

image.png

C、1024*768分辨率全屏显示的情况下：

image.png

【贰】不同浏览器窗口缩放时的效果展示：

A、正常浏览窗口显示：

image.png

B、缩放浏览窗口显示：

image.png

【叁】上述HTML演示代码

* {

margin: 0;

padding: 0;

}

.big {

width: 100vw;

height: 100vh;

background: yellowgreen;

}

.big div {

height: 100px;

}

.big img {

width: 710px;

height: 400px;

}

.box1 {

width: 960px;

background: tomato;

}

.box2 {

width: 1920px;

background-color: darkred;

}

一、npm安装依赖

npm i lib-flexible -S

npm i px2rem-loader -D

二、新建文件夹

在src下面新建utils文件夹，并新建一个js文件，取名为【flexible】

image.png

三、将下述代码全部复制进【flexible】文件中

(function() {

// flexible.css

var cssText =

'' +

'@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent}body,html{font-family:"Microsoft YaHei",sans-serif,Tahoma,Arial}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,