CSS3의 미디어 쿼리 학습 요약 공유

CSS3의 미디어 쿼리는 프런트엔드 반응형 디자인 페이지를 만드는 데 자주 사용됩니다. 여기서는 IE8의 호환성 문제에 대한 솔루션을 포함하여 CSS3의 미디어 쿼리에 대한 학습 요약을 공유합니다.

1. 미디어 쿼리에서 지원하는 속성

2. 여러 미디어 쿼리 결합 아님 - 특정 미디어 유형만 제외 - 특정 미디어 유형 결정

3. 인용 스타일의 예

<link rel="stylesheet" media="all" href="style.css" />   
<link rel="stylesheet" media="screen and (min-width:980px)" href="desktop.css" />   
<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:980px)" href="pad.css" />   
<link rel="stylesheet" media="screen and (min-width:480) and (max-width: 768px)" href="phone.css" />   
<link rel="stylesheet" media="screen and (max-width:320px)" href="small.css" />

4. 인라인 스타일 예시

rree

5. 🎜>
문제의 근원: 프로젝트의 CSS 파일에서 미디어를 사용하여 창 크기에 따라 레이아웃을 자동으로 조정합니다. 그러나 IE8 이하 브라우저에서는 CSS3 미디어를 지원하지 않습니다. 쿼리 즉, @media 화면의 CSS 코드(최대 너비: 900px)가 실행되지 않습니다.

@media screen and (min-width: 980px) {   
    //css code
}   
@screen and (min-width:768px) and (max-width:980px) {   
    //css code
}   
@screen and (min-width:480) and (max-width: 768px) {   
    //css code
}   
@screen and (max-width:320px) {   
    //css code
}   

@media screen and (max-device-width: 480px) {   
    //max-device-width等于480px
}   
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {   
    //设备宽高比   
}   
@media all and (orientation:portrait) {   
    //竖屏   
}   
@media all and (orientation:landscape) {   
    //横屏   
}

이게 어떻게 좋은가요, 온라인 그런데 , 많은 사람들이 솔루션을 제안했습니다.
IE8 및 이전 브라우저는 CSS3 미디어 쿼리를 지원하지 않습니다. 이 문제를 해결하려면 페이지에 css3-mediaqueries.js를 추가하면 됩니다.

@media screen and (max-width: 900px) {   
  ...   
}

그렇군요, 꽤 간단한데, 프로젝트에서 아무리 시도해봐도 결과가 매우 실망스럽습니다. 시도해 본 동료들이 나에게 조언을 해주길 바랍니다. 나는 인터넷에서 배운 또 다른 좀 더 복잡한 방법을 사용할 수밖에 없습니다. 여기서 고려해야 할 두 가지 문제가 있습니다. 낮은 버전에서는 이 작업이 가능하고, 다른 하나는 브라우저만 특정 크기로 축소할 수 있다는 것입니다. 이 처리는 크기 범위가 결정된 후에만 수행됩니다. 방법은 다음과 같습니다.
원리: jquery를 사용하세요. 이해가 되지 않으면 사용 방법만 알아두세요. 그런 다음 필요에 따라 html에서 해당 CSS 파일을 변경하세요. 코드:

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

navigateLowerIE8.css 파일은 IE8의 페이지 레이아웃이며 하위 버전의 브라우저입니다. 줄인. 좋아, 모든 것이 실제로 완료되었습니다.

위 내용은 CSS3의 미디어 쿼리 학습 요약 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!