2013-05-28 2 views
0

내가 궁금한 점이 있지만 때로는 최후의 수단이라고 묻는 것에 대해 유감스럽게 생각합니다.Fluid Grid Layout Control

나는 내 머리카락을 꺼내 ​​주말에 수백 페이지를 읽었으며, 이것을 달성하는 방법에 관해서는 머리가 아프다.

바탕 화면과 ipad (하위 페이지는 콘텐츠와 사이드 바 2 개로 되돌아갑니다)에 대한 간단한 4 열 '집'방문 페이지를 만들고 싶습니다. 사용자가 iPhone으로 이동하면 사용자가 2 열을 보길 원합니다.

그리드 시스템을 사용하여 4 열의 축소 버전을 표시하도록 아이폰을 관리했거나 하나의 열을 표시하도록 관리하지 못했습니다. 어느 쪽도 도움이되지 않습니다.

도움이된다면 달성하려는 것의 이미지를 첨부했지만이 분야에서 경험이있는 사람이라면 올바른 방향으로 나를 가리킬 수있는 사람이라면 정말 감사 할 것입니다.

저는 WordPress를 사용하여 개발 중이며 부트 스트랩, 반응이 빠른 테마 및 뼈대를 사용해 보았으며 각각 동일한 결과를 얻었습니다. 각각은 반응성있는 유체 그리드를 사용합니다. 나는 틀린 나무를 짖고 있을지도 모른다. 그러나 누군가 옳은 방향으로 나를 지적 할 수 있으면 나는 그것을 감사 할 것이다.

example of what I am trying to achieve

답변

1

당신은 화면 크기/장치의 폭에 따라, CSS 미디어 쿼리를 사용해야합니다.

이 당신의 CSS는 각 장치에 열의 폭 스타일을 할 수

...

http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

어도비 드림위버의
+0

유체 너비가 다른 장치를 사용하여 이동할 때 다음 뷰포트 메타가 유용 할 수 있습니다. 뷰포트 기본 사항 ' – Chris

+0

안녕하세요, 어제 봤던 것보다 더 나은로드입니다. 나는 이제 아이폰 브라우저가 정확한 숫자의 웹 사이트를 보여줄 수있게되었다. 지금 내가 가진 문제는 각 블록의 너비가 220px이므로 iPhones 640px 너비 화면에 220 x 2 더하기 10px 여백 = 450px 너비의 공간이 있습니다. 이것은 190px 여분을 남겨 두어 그래서 위의 아이폰 화면처럼 보이지 않는다 - 어떤 제안? 다시 고마움을 ... –

+0

주위에 놀아 나는 약간의 일로 나는 행복하게 살아갈 수있는 날들을 사용하여 내가 원하는 것을 할 수있는 사이트를 얻었습니다. 귀하의 의견을 보내 주셔서 감사합니다. –

0

현재 버전 현재도 가치가있다 "유체 그리드 레이아웃"라고 어떤 지원 이런 종류의 문제를 찾으십시오. 또한 장치 간 레이아웃 문제를 신속하게 해결하는 데 매우 유용합니다. 하나의 인터페이스에서 모바일, 태블릿 및 데스크탑을 쉽게 디자인 할 수 있습니다!