PC适配移动端

**手机端适配**
媒体查询
组件统一样式  
媒体查询写四套样式 
手机 屏幕宽小于768px 
平板 屏幕宽 大于等于768px 小于992px 
桌面显示器  屏幕宽大于等于992px  小于1200px
大屏幕 屏幕宽大于等于1200px 

**页面整体及页面内容**
页面看是需要主PC还是主移动端
主移动端的话 一般需要另外做页面 然后页面渲染的时候 获取视口宽度 选择加载哪个页面
主PC端的话  中屏幕适配做样式切换
小屏幕适配做页面切换 样式切换 内容隐藏
（内容隐藏可以用css做 用css做直接display：none；  也可以用js做 用js做的话需要 页面内容也是动态渲染的 组件过滤）

**页面整体导航头适配**
中屏幕和大屏幕可以保持原有样式不变 或者在中屏幕就切换成 导航侧拉 或下拉
移动端不需要显示的页面可以过滤路由 不需要显示的块可以用css隐藏

**筛选值表单**
小屏幕可以放统一按钮  按钮侧拉或下拉里面放表单内容  

**媒体查询 **
所有css样式宽度不能写死  高度尽量不写死   
至于字体需要定义一个统一的标准 小屏幕的字号 中屏幕的字号 大屏幕的字号和超大屏幕的字号
页面布局尽量使用弹性盒子 不推荐浮动  非必要情况不定义页面样式过高的层级
页面板块边距使用外包盒子的padding充当边距 不使用margin

//bootstrap标准
/* 超小屏幕（手机，小于 768px） */
默认样式 
/* 小屏幕（平板，大于等于 768px） */
@media screen and (max-width: 768px) {}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media screen and (max-width: 992px) {}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media screen and (min-width: 1200px) {}

//我们一般是先大屏幕再小屏幕适配
默认大屏幕   样式层级要和默认样式严格保持一致   大屏幕适配就要用下面这种顺序  在css中下面的权重较高

//中等
@media screen and (max-width: 1200px) {}
//平板
@media screen and (max-width: 992px) {}
//手机
@media screen and (max-width: 768px) {}

**echarts图表适配**
（包含图表内容适配和图表容器适配 容器适配需要通过媒体查询实现）
所有px单位进行转换 方法如下
 //单位转换
 

  echartsfontSize(res) {
      const clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      const designWidth = 1920; // 设计稿宽度
      const minWidth = 1024; // 最小适配的屏幕宽度
      const screenWidth = Math.max(clientWidth, minWidth); // 当前屏幕宽度与最小适配宽度比较
      const fontSize = screenWidth / designWidth;
      return res * fontSize;
    },

//在图表配置项里

 label: {
            normal: {
              show: true,
              lineHeight: _that.echartsfontSize(20),
              formatter: '{c}',
              position: 'top',
              textStyle: {
                color: '#00D6F9',
                fontSize: _that.echartsfontSize(14)
              }

            }
          }

还有一种很古早的适配方案 就是不管那个屏幕显示的都是同一种页面样式
需要手指放大页面具体查看的那种