반응형 웹 Mostly Fluid

 

유동형 Mostly fluid

 

유동형 패턴은 주로 유동형 격자(grid)로 구성된다. 대형 혹은 중간크기의 스크린에서 이 패턴은 보통 같은 크기로 간주되며, 단지 더 넓은 화면에서는 여백정도만 조정된다. 더 작은 스크린에서 이 패턴은 열(columns)들이 수직 방향으로 쌓이면서 컨텐츠가 재배치 된다. 이 패턴의 중요한 장점은 작은 화면과 큰 화면 사이에 단 하나의 중단점(breakpoints)만 있으면 된다는 것이다.

 

 

 

css  

*{margin:0; padding:0;}
	#wrap{width:1000px;margin:0 auto;}
	#box_a{height:400px; background:#f1779e;}
	#box_b{height:400px; background:#fcb354; width:50%; float:left;}
	#box_c{height:400px; background:#24bbaf; width:50%; float:right;}
	
	@media screen and (max-width:1024px){
		#wrap {width:90%;}
	}
	
	@media screen and (max-width:800px){
		#wrap {width:100%;}
	}
	@media screen and (max-width:480px){
		#box_b {float:none;width:auto;}
		#box_c {float:none;width:auto;}
	}

html

참조 : http://www.tendency.co.kr/new/TLab/tlab_view.asp?sbdtype=0000300007&bno=11#quick main