반응형 css 다르게 import
반응형으로 css 를 다르게 import 해야할 일이 생겼다. 구글링을 해도 잘 나오지 않았다.
한참을 구글링한 끝에..
생각보다 간단하였다. jQuery 같은것도 안써도 됐다.
<link rel="stylesheet" href="mobile.css" media="(max-width:800px)">
<link rel="stylesheet" href="pc.css" media="(min-width:800px)">
또 다른 방법은..
<style>
@media all and (min-width:320px){
body{background:red;}
}
@media all and (min-width:768px){
body{background:green;}
}
@media all and (min-width:960px){
body{background:yellow;}
}
</style>
이상하게 안되서 아래글을 자세히 살펴봤더니 and 뒤에 한칸을 반드시 띄워야 했다. and 뒤에 스페이스를 두고 다시 실행해 봤더니 배경색이 잘 바뀌었다.
===================================
구글링한 내용대로 실제로 해보니 문제가 생겼다.
<link 에 media 있는게 깔끔해 보여 했더니 태블리슬 어떻게 하는지 모르겠다.
그래서 실패하였고 그냥 @media all 방식으로 태블릿까지 3개 종류에서 되게 해야겠다.
진짜로 해보니 잘 되었다. 다만 소스가 길어 진다는 점.. 어떻게 파일로는 안될려나..
참조:
https://5bong2-develop.tistory.com/m/85