미디어 쿼리 문법
2013.03.05 13:32:36 (118.43.21.225)
미디어 쿼리 문법을 간단하게 살펴보죠.
브라우저의 너비가 980px 이하로 작아지면 화면 우측에 있는 글로벌 네비게이션이 화면 아래쪽으로 뚝 떨어집니다. 지금 브라우저의 폭을 조절해서 한번 확인해 보세요.
@media all and (min-width:980px) { /* 화면 너비가 980px 이상이고 미디어쿼리를 지원하는 브라우저라면 아래
코드를 해석함 */
.content{ float:left; width:600px } /* 콘텐츠 플롯하고 너비를 고정 */
.nav{
float:right; width:330px } /* 네비게이션 플롯하고 너비를 고정 */
}
댓글 0
댓글 쓰기 권한이 없습니다.
23 | 아이폰 텍스트 크기 자동 조절 | 2015.05.02 |
22 | -webkit-tap-highlight-color:rgba(0,0,0,0); | 2015.05.02 |
21 | background:none;-webkit-appearaance:none;,border-radius:0 | 2015.05.02 |
20 | 아이폰 input type이 sumit 일때 css 적용안되는 문제 | 2014.12.10 |
19 | 해상도에 따른 폰트 사이즈 | 2013.09.02 |
18 | CSS3 media 쿼리로 브라우져 해상도별 지원 | 2013.08.06 |
17 | 모바일 코딩 초읽기 | 2013.08.06 |
16 | 간단히 모바일용 웹 서비스를 디자인, 코딩할 수 있는 제이쿼리 모바일 닷컴 | 2013.08.06 |
15 | 아이폰 input 박스선 없애기 | 2013.08.06 |
14 | 모바일 코딩을 위한 메타테그 | 2013.08.06 |
13 | HTML5 enabling script | 2013.03.05 |
> | 미디어 쿼리 문법 | 2013.03.05 |
11 | 모바일웹 슬라이드(Swipe)-jqueryMobile을 이용한 swipe 구현 | 2013.03.05 |
10 | 말줄임표 : css+jquery | 2012.08.01 |
9 | 모바일웹 터치스크롤 구현 iScroll | 2012.07.16 |
8 | 아이콘,이미지 체크리스트 | 2012.07.11 |
7 | 모바일 웹 해상도 | 2012.07.11 |
6 | 모바일 해상도 | 2012.07.11 |
5 | 가로/세로 모드 변경관련 스크립트 | 2012.07.05 |
4 | 확대, 축소 여부 지정 | 2012.07.05 |