반응형 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

CSS - 반응형 웹