HTML/CSS IE 7, 8 @media screen 안먹는 문제
HTML/CSS IE 7, 8 @media screen 안먹는 문제
익스플로러 8버전 이하에서는 @media screen 이 먹히지가 않습니다.
https://github.com/heathcliff/css3-mediaqueries-js 여기에 가면 ie8 이하에서도 동작하도록 자바스크립트로 만들어진 파일을 다운로드 받을 수 있습니다.
https://github.com/heathcliff/css3-mediaqueries-js/blob/master/css3-mediaqueries.js
긁어서 css3-mediaqueries.js 파일로 저장을 하면 됩니다.
사용예제
<!doctype html>
<html>
<head>
<!--[if lt IE 9]>
<script src="/js/css3-mediaqueries.js"></script>
<![endif]-->
<style>
.div_test {
width:100%;
height:500px;
background:white;
}
@media screen and (max-width: 1280px) {
.div_test {
background:yellow;
}
}
@media screen and (max-width: 1024px) {
.div_test {
background:blue;
}
}
@media screen and (max-width: 640px) {
.div_test {
background:red;
}
}
@media screen and (max-width: 360px) {
.div_test {
background:green;
}
}
</style>
</head>
<body>
<div class="div_test"></div>
</body>
</html>