pc 和大屏如何适配

适配能力

一、适配方案

移动端适配
大屏/PC 适配

二、移动端适配

适配前提：设计搞尺寸是 750 的;
适配规则：1rem = 100px;
移动端适配使用的是 netease-adapt.js；直接在 main.js 全局引入即可;
js 复制代码
```
import "./netease-adapt";
```

三、大屏/PC 适配

大屏/PC 适配一般可分为三种情况：

1、固定尺寸
2、固定尺寸按照实际屏幕尺寸进行压缩或者拉伸
3、固定比例尺寸适配（rem）
4、使用postcss-pxtorem对px进行自动转换rem

无论哪种情况，页面宽高等单位最好使用百分比，若以后项目情况改变可尽可能少的改动。

固定尺寸：一般在页面的最外层设置页面的宽高即可，例如项目尺寸是 1920*1080
css 复制代码
```
body {
  width: 1920px;
  height: 1080px;
}
```

固定尺寸按照实际屏幕尺寸进行压缩或者拉伸:在 PC 端，虽然很多设备都是 16：9 的尺寸，但是仍有 16:10、4:2.5 的设备，尽管都是 16:9 的屏幕，也会因为浏览器是否有显示地址栏、是否显示标签栏而导致页面的可视窗口不一致的问题，所以有此适配方案，但此可能导致页面出现压缩或拉伸。具体可按以下流程引入

最外层盒子的宽高使用百分比铺满页面,页面内元素宽高等尽可能使用百分比，字体、间距可按照设计图尺寸写 px
css 复制代码
```
body {
  width: 100%;
  height: 100%;
}
```

App.vue 添加如下代码

js 复制代码

methods: {
 resizeWindow() {
   //页面实际的尺寸
   let pageWidth = 1920, pageHeight = 1080;
   // 因为设计图是带1920*1080的，但是浏览器本身带顶部工具栏，所以缩放到时候稍微更小一点，这样不会有滚动条，这个值可以选择更大些，比如2300，这样左右两边会有空白
   const myWidth = document.documentElement.clientWidth;
   const myHeight = document.documentElement.clientHeight;
   console.log(myWidth, myHeight);
   console.log(myHeight / pageHeight, myWidth / pageWidth);
   document.getElementById("app").style.transform = `scaleX(${
     myWidth / pageWidth
   }) scaleY(${myHeight / pageHeight})`;
   document.getElementById("app").style.transformOrigin = "left top";
 },
 created() {
   this.resizeWindow();
   //页面尺寸变化时重新修改
   window.onresize = () => {
     this.resizeWindow();
   };

固定比例尺寸适配（rem）：此方案类似移动端，利用屏幕宽度变化动态改变 html 的字体大小，注意：rem 尽量用来设置字体大小，尽量不要用来设置高度，引入如下

最外层盒子的宽高使用百分比铺满页面,页面内元素宽高等尽可能使用百分比；

css 复制代码

body {
  width: 100%;
  height: 100%;
}

App.vue 添加如下代码

js 复制代码

 methods: {
   resetSizeRem() {
     let designSize = 1920; // 设计图尺寸
     let html = document.documentElement;
     let wW = html.clientWidth; // 窗口宽度
     let rem = wW / designSize;
     document.documentElement.style.fontSize = rem + "px";
   },
 },
 created() {
   this.resetSizeRem();
   //页面尺寸变化时重新修改
   window.onresize = () => {
     this.resetSizeRem();
   };

4.postcss-pxtorem 配置流程

安装依赖 npm install postcss postcss-pxtorem --save-dev
加入根目录加入 postcss.config.js
ui输出以750的设计稿，所以rootValue一般以75作为基准，但是注意一些ui框架是以375作为基准，可以参考示例js进行自定义修改
exclude为过滤转换的目录，一般只过滤node_modules，若项目有特殊需求，可自行修改。