页面左右排版--@media、[class*= col-]解释

条件：页面存在左右两个盒子左边类名为innerForLeft，右边类名为innerForRight 要求：1、当浏览器宽度大于1920px时，左边盒子自适应，右边盒子固定宽度 2、当浏览器小于1300px时，左边盒子与右边盒子宽度分别为2：1的比例

  @media (min-width: 1920px) {
    .innerForLeft{
      flex-grow: 1;
      flex-shrink: 1;
    }
    .innerForRight {
      width: 490px;
    }
  }

  @media (min-width: 1300px) and (max-width: 1920px) {
    .innerForLeft{
      flex: 2;  
    }
    .innerForRight {
      flex: 1;
    }
  }

另外针对遇到的以下问题做个记录

[class*= col-] 代表包含 col- 的类名 ，比如说 col-md-4 ,demo-col-2(这个是虚构的)等都可以匹配到。

[class^=col-] 代表 以 col- 开头的类名，比如说 col-md-4

[class$=col-] 代表以 col- 结尾的类名