jquery mobile CSS

Question

jquery 모바일 CSS를 데스크톱의 "친숙한"CSS로 바꿀 수 있기를 원합니다. 예를 들어 사용자가 모바일 장치가 아닌 경우 비 모바일 유형 스타일로 스타일을 표시합니다. 이 작업을 수행하는 플랫폼 또는 기존 CSS가 있습니까?

Answer 1

모바일 버전 CSS를 데스크톱에서보기 좋게 변경하십시오.

CSS3 미디어 쿼리

몇 가지 예 :

최대 폭 - 보기 영역이 600 픽셀보다 작은 경우.

@media screen and (max-width: 600px) { 
    .class { 
    background: #ccc; 
    } 
} 

최소 폭 -보기 영역이 900px보다 큰 경우 다음 CSS 적용됩니다.

@media screen and (min-width: 900px) { 
    .class { 
    background: #666; 
    } 
} 

여러 미디어 쿼리 - 여러 미디어 쿼리를 결합합니다. 보기 영역이 600px와 900px 사이에 있으면 다음 코드가 적용됩니다.

@media screen and (min-width: 600px) and (max-width: 900px) { 
    .class { 
    background: #333; 
    } 
} 

막스 장치 폭 480 픽셀 (예 아이폰 디스플레이.) 개별 스타일 시트

@media screen and (max-device-width: 480px) { 
    .class { 
    background: #000; 
    } 
} 

링크 일 경우, 코드가 적용 장치 품 :

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />