CSS와 관련된 팁이 있는 곳입니다. 좋은 자료 공유해 주세요.
글 수 1
0
조회 수 : 3242 신고 : 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]-->
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 아이콘이 붙게됩니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기
본문으로 바로가기
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상
첫번째 댓글을 남겨주세요!