响应式布局

对于PC端布局来说，浏览器都是可以手动缩小的，对于这种类型的PC端，一般有两种方式：媒体查询+流式布局, 另外一种就是采用rem布局。 PC端项目主要分为两类：

官网：这种页面特点就是页面主体内容居中显示，页面最底层有个背景，并且当浏览器小于某些宽度的话会有一个横向滚动条

管理系统：这类系统页面有一个显著的特点，就是左侧是菜单栏，右边是主要页面内容，当浏览器过小也会有横向滚动条

1. 媒体查询 + 流式布

对于以上这种，都可以采用flex布局来实现，官网这类就相当于是单列布局，管理系统这种就相当于是两列布局。具体实现如下：

给页面设置最小宽度

  #app {
    min-width: 960px;
  }

页面采用flex布局
对于容器类元素设置width：100%
必要的话采用vw
对于某些特殊屏幕采用媒体查询适配。

2. rem适配方案

对于一般浏览器的适配采用上面的适配方案基本就足够了，如果还需要适配跟着屏幕大小进行像素级适配的话，那就还需要使用rem布局方案。这种布局方案和移动端一样，只是设计稿的基础值不一样而已。

2.1 动态设置html的font-size

手动实现js

 // rem等比适配配置文件
 // 基准大小
 const baseSize = 14
 // 设置 rem 函数
 function setRem() {
     // 当前页面宽度相对于1920宽的缩放比例，可根据自己需要修改。
     const scale = document.documentElement.clientWidth / 1920
     // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
     const fontsize = baseSize * Math.min(scale, 4)
     document.documentElement.style.fontSize = `${fontsize >= 12 ? fontsize : 12}px`
 }
 // 初始化
 setRem()
 // 改变窗口大小时重新设置 rem
 window.onresize = function() {
     setRem()
 }

在main.js中引入该js文件

import '@/rem.js'

使用插件amfe-flexible 安装插件：

npm i lib-flexible amfe-flexible --save-dev

在main.js中引入插件

import 'amfe-flexible';

2.2 使用插件将px转成rem

安装插件

npm install postcss-pxtorem --save-dev

配置

// 
module.exports = {
 plugins: {
   'postcss-pxtorem': {  //1920
     rootValue: 20, // 设计稿元素尺寸/20，比如设计稿元素宽1920px,最终页面会换算成1920/20= 96rem
     propList: ['*']
   }
 }
}

配置完成之后，就可以正常在页面中使用px开发了，然后在浏览器中会正常转成rem.

PC端布局适配方案

响应式布局

1. 媒体查询 + 流式布

2. rem适配方案