2017년 6월 21일 수요일

css responsive @media query example

site: http://starworks.igaworks.com/page/index


/* Responsive Device Start */
/* Responsive Device Start */
/* Responsive Device Start */

/* 사용자 해상도가 1240px 이상일 때 */
@media (min-width: 1240px) {
  .footer-tab {
    box-sizing: border-box;
    background-color: #FCFCFC;
    color: #AAAAAA;
    width: 1060px;
    padding: 0px;
    margin: 0 auto;
    font-size: 10px;
  }
}
/* 사용자 해상도가 1239px 이하일 때 */
@media (max-width: 1239px) {
  header .wrap {
    position: relative;
    width: 95%;
    line-height: 50px;
    padding: 0px 50px;
    margin: auto;
    height: 100%;
  }
  article section .wrap {
    box-sizing: border-box;
    width: 95%;
    padding: 0px 50px;
    margin: 0 auto;
    background-color: #FFF;
  }
  .footer-tab {
    width: 90%;
    font-size: 9px;
  }
  .footer-mail {
    text-align : right !important;
  }
  .wrap.subscribe .row.faqTerms1 {
      padding: 0px;
      margin: 0px;
  }
  .list_board .txt_date {
    font-size:10px;
  }
  .answer p {
    padding: 25px 90px 0px 110px;
  }
}
/* 사용자 해상도가 1024px 이하일 때 */
@media (max-width: 1024px) {
}

댓글 없음:

댓글 쓰기