맛집 여행 캠핑 일상 생활

HTML/CSS IE 7, 8 @media screen 안먹는 문제 본문

HTML.CSS

HTML/CSS IE 7, 8 @media screen 안먹는 문제

영은파더♥ 2016. 12. 13. 15:04
728x90

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>


728x90
반응형
저작자표시 비영리

'HTML.CSS' 카테고리의 다른 글

CSS 여러개의 클래스 중에 몇번째 이후만 다르게 적용  (0) 2017.02.01
CSS IE 에서 스크롤바가 안나타나는 경우  (0) 2017.01.17
HTML/CSS LI 태그 도트이미지가 크롬과 IE가 다르게 보이는 문제  (0) 2016.11.03
HTML/CSS last-child 안먹는 경우  (0) 2016.10.28
HTML/CSS DIV 모서리 라운드 처리  (0) 2016.08.05
공유하기 링크
'HTML.CSS' Related Articles more
Trackback : | Comments :