[bootstrap] AdminLTE에서 print시 모바일 기본인 것을 PC버전으로 출력하고 싶을때. CSS3 Media Queries

AdminLTE에서 print시 모바일 기본인 것을 PC버전으로 출력하고 싶을때.  미디어쿼리 사용하자. 

CSS3 Media Queries

 

기존 css에 media=screen 으로 지정하고, print에도 동일한 스타일 적용할꺼면  media="screen,print" 로 지정

<link href="css/AdminLTE.css" rel="stylesheet" type="text/css" media="screen" />


<!-- print -->
 <link href="css/print.css" rel="stylesheet" type="text/css" media="print"/>

print.css에 있으면 인쇄시 적용된다. 

 @media print { 
 }

그래서, 일단 모바일로 안나오게끔 인쇄할때에도 사용되는 col-lg-~~를 넣어주었다. 

 

/* Enhancement for printing */
 
@media print {   
    .col-lg-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    .col-lg-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-lg-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66667%; 
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    .col-lg-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

}

/* End of media print */

 

 

 

github.com/ColorlibHQ/AdminLTE/issues/199