2022年9月9日金曜日

@media メディアクエリーの優先順位

 cssに記述された順番から読み込む

上から読み込む

それから条件を読み込む(ウィンドウサイズ)


例)

/* 1 */

  #left_g_area {

      display: none;

      -webkit-box-flex: 0;

      -ms-flex: 0 1 auto;

      flex: 0 1 auto;

      -webkit-box-orient: vertical;

      -webkit-box-direction: normal;

      -ms-flex-flow: column nowrap;

      flex-flow: column nowrap;

      -webkit-box-pack: end;

      -ms-flex-pack: end;

      justify-content: flex-end;

      -webkit-box-align: stretch;

      -ms-flex-align: stretch;

      align-items: stretch;

  }


/* 2 */

  @media (min-width: 960px) {

  #left_g_area {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;

      width: 380px;

      padding-left: 40px;

      padding-right: 20px;

  }

}


/* 3 */

  @media (min-width: 1160px) {

  #left_g_area {

      width: 400px;

      padding-right: 40px;

      padding-left: 60px;

  }

}