변경 클래스 유체 레이아웃 CSS

Question

나는 유체 CSS의 그리드 (http://cssgrid.net/)

나는 현재이 그리드 시스템을 사용하여 웹 사이트를 설계하고있다. 나는 "수업을들을 수있는 충분한 공간이 없다"고하면서 수업을 어떻게 바꿀 수 있는지 확신하지 못한다.

예,이 같은 상단 바 있습니다

링크 : http://i47.tinypic.com/2eouv54.png

을하지만 충분히 브라우저 창 크기를 조정할 때, 나는이와 끝까지 :

보시다시피, 완전히 엉망진창 같습니다!

어떻게 유체 레이아웃을 최대한 활용할 수 있습니까? 내 말은, 어떻게 그 버튼과 사용자 이름을위한 공간이 충분하지 않을 때 그들을 맞출 수 있을까요? 나는. 새로운 수업을 만들고 그것을 다른 곳으로 옮겨서.

감사합니다.

Answer 1

당신은 그런 일이있을 때 :이 같은 것을 추가 할 수 있습니다

aside {float: left; width: 50%; padding: 0 50px; box-sizing: border-box; background: #000;} 

:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 768px) { 
    aside {float: none; width: 100%; padding: 0 20px;} 
} 

첫 번째 규칙은 모든 화면 크기에 적용됩니다. 두 번째 규칙은 폭이 320px에서 768px 인 기기에 적용되며 기존 규칙을 덮어 씁니다. 이것은 float, width 및 padding을 변경하지만 변경되지는 않는다는 것을 의미합니다. 배경 또는 상자 크기.