촛잉(초딩디스 ㄴㄴ)도 할 수 있는 쉽고빠른 반응형 만들기

/* layout */

 
/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
}#container 			{ padding-top:20px; margin:0; width:95%; }
#left				{ float:left; width:250px; padding-right:20px; padding-bottom:20px;}
#header 			{ text-align:right; width:250px; padding-top:40px; padding-bottom:20px;}
#sidebar			{ text-align:right; width:250px; text-align:right;}
#content 			{ float:right; width:95%; padding-bottom:40px; line-height:160%; overflow:hidden;}
 
/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
}
 
/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width:1200px) {
    /* layout */
  #container 			{ padding-top:20px; margin:0; width:70%; }
#left				{ float:left; width:250px; padding-right:20px; padding-bottom:20px;}
#header 			{ text-align:right; width:250px; padding-top:40px; padding-bottom:20px;}
#sidebar			{ text-align:right; width:250px; text-align:right;}
#content 			{ float:right; width:70%; padding-bottom:40px; line-height:160%; overflow:hidden;}
}

 

easy & past  

 

 

첫줄(모바일) Small devices { 항목별 내용채우기<--레이아웃)

 

 

 

마지막(컴퓨터) Extra large devices {항목별 내용채우기<--레이아웃}

 

 

저는 모바일과 컴퓨터에만 최적화를 했습니다.

 

타블렛은 없어서 ㅋ

 

사이즈별로 세팅이 반응형으로 가능하고~

 

크기를 원하는 수치(530px)로 지정해도 되고, 퍼센트로 지정하면 비율로 먹힙니다 (90% <--이런식) 

 

 

<뚜뚜월드>의 인생밀접형 잡지식은 앞으로도 계속 연재됩니다. ㅋㅋ

 

뭔가 여러분에게 도움이 되거나 재밌거나 멋진것이 있다면

 

작던 크던 <포스팅의 재물>이 될 것입니다.

 

작은 나눔, 큰 기쁨 

---

 

정보는 제 뇌로 한번 걸러

 

효과가 있다고

 

생각된 정보들만

 

제 아름다운 지적능력과 신체능력이

 

케미스트리를 이뤄

 

집필됩니다. 망했다.... ? ㅋㅋ

 

 

그래서 갈길이 멉니다. 같이 가자9 ^^＊

 

 

똥글이 많은건 그래서였네

 

뿌직 =3333