퀵메뉴 닫기 퀵메뉴 열기

CSS

CSS와 관련된 팁이 있는 곳입니다. 좋은 자료 공유해 주세요.
글 수 117

0

조회 수 : 2897 신고 : 0

반응형웹을 제작하면서 해상도에 따른 CSS를 호출하는 두가지 방법입니다.

해상도 따라 CSS 호출하기 (작성하신 수치에 따라 해당 CSS를 호출합니다.)

<!-- phone -->
<link href="phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)" />

<!-- tablet -->
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" />

<!-- pc -->
<link href="pc.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)" />


해상도에 따라 해당 소스를 우선적으로 읽혀드립니다.

<!-- phone -->
@media (max-width:320px){

}

<!-- tablet -->
@media (min-width:321px) and (max-width:768px){


}

<!-- pc -->
@media (min-width:769px){


}

참고로 익스9미만 버전에서는 미디어쿼리를 지원하지 않기때문에 그이하 버전에서는 PC버전으로 CSS를 호출하시면됩니다.
<!--[if lt IE 9]><link href="pc.css" rel="stylesheet" type="text/css" /><![endif]-->
회원 서명란
profile

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

태그
엮인글 :
http://www.webmini.net/css/547212/925/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기
List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
공지 Cascading Style Sheets (CSS3) file title: 새싹빽짱구 2010-06-29 1 32514
공지 CSS 용량을 줄여주는 사이트 file [6] title: 새싹빽짱구 2010-05-13 1 23057
공지 css 팁에 관련해서... [1] title: 새싹빽짱구 2007-11-30 1 44209
117 IOS 박스 스크롤 부드럽게 하기 -webkit-overflow-scro... title: 새싹빽짱구 2016-02-16   187
116 CSS3 box-sizing:border-box [1] title: 새싹빽짱구 2016-02-16   128
115 [반응형웹]해상도에 따른 CSS호출하기(미디어쿼리) title: 새싹빽짱구 2014-05-20   2897
114 css 패턴 title: 새싹빽짱구 2014-05-14   1671
113 아이폰 모바일에서 숫자 색상스타일 title: 새싹빽짱구 2014-01-02   7568
112 모바일 가로버전 @media title: 새싹빽짱구 2013-12-23   2726
111 모바일 코딩시 메뉴가 3개일때 해결방법 title: 새싹빽짱구 2013-12-18   3405
110 크롬,사파리,익스 스크롤바 바꾸기 title: [ani]방울UI 2013-08-08   3117
109 자주쓰는 css3 속성 Top10 title: 새싹빽짱구 2013-01-09   2775
108 css3 box-shadow 에 대해 알아보자 title: 새싹빽짱구 2013-01-09   2427
107 list-style 속성들 title: 새싹빽짱구 2012-10-26   2811
106 css3 그라데이션을 손쉽게 적용하자 title: 새싹빽짱구 2012-10-11   3841
105 css3 border-radius 속성 file [1] title: 새싹빽짱구 2012-09-03   4317
104 [css3] 웹 브라우저별 벤더 프리픽스 title: 새싹빽짱구 2012-08-30   3899
103 모바일 코딩시 손가락으로 확대/축소 가능하게 할려면? title: 새싹빽짱구 2012-08-06   5551
102 css3로 브라우저 별로 그라데이션 주기 title: 새싹빽짱구 2012-07-23   3889
101 아이폰에서 가로보기 했을때 글자가 커지는 문제 title: 새싹빽짱구 2012-07-19   5377
100 인쇄할때 A4 용지에 맞게 출력하기 [1] title: 새싹빽짱구 2012-04-29   9030
99 [css3] 텍스트에 그림자주기 (text-shadow) [1] title: 새싹빽짱구 2012-04-26   4639
98 css3로 돌아가는 애니메이션 효과주기? [2] title: 새싹빽짱구 2011-12-06   5029
대한민국 왕초보탈출 시원스쿨

Top