저는이 몇 주 동안 반응 형 웹 디자인을 만들려고합니다. 나는 반응 형 웹 디자인에 대해 많이 읽었으며 그 중 하나는 그리드 시스템에 관한 것입니다. 978 그리드 시스템, 12 컬럼 그리드 시스템 등이 있습니다. 그 시스템이 무엇을 위해 사용되고 있는지, 그리고 이미 웹 사이트에서 제공되는 파일을 어떻게 구현하는지에 대해서는 잘 모르겠습니다. 웹 사이트의 예 : http://960.gs/반응 형 웹 디자인 그리드 시스템 구현
24 칼럼 그리드, 12 칼럼 그리드, 16 칼럼 그리드와 다른 것의 차이점을 설명해 주시겠습니까?
감사합니다.
저는 프론트 엔드 웹 개발자이며 일부 레이아웃을 디자인했지만 어떤 방법으로도 "전문가"라고 주장하지 않습니다. 그러나 실제로 HTML, CSS3 및 자바 스크립트로 반응 형 디자인을 구축 한 경험이 많습니다. 내 경험/의견이 어디에서 유래 되었습니까?
간략하게 그리드 시스템을 읽었으며 유용 할 수 있지만 필자는 반응 형 디자인의 기본 아이디어는 고정 된 크기가 필요없는 레이아웃을 만든 다음이를 미디어 쿼리 ("스냅 상태")와 결합하는 것입니다. 웹 페이지의 경우 일반적으로 모바일/소형 버전, 중형 및 대형 3 가지 레이아웃이 있습니다. 각각의 크기는 250px 크기로 조정할 수 있습니다 (내용은 컨테이너 내에서 동적으로 확장되고 이미지는 확대 등). 너무 커지면 다음 큰 레이아웃으로 "스냅"할 수 있습니다.
작은 레이아웃 : 450 픽셀 800 픽셀 행 (2 열)
큰 레이아웃 : 800 픽셀 1300px 내지 (3 열) x 250 픽셀 (1 열)
매체 레이아웃 450 픽셀로 예를 들어
더 열 이제까지 적은 250 픽셀에 대한보다 결코 450 픽셀이 각각의 열은 약 200 픽셀을 스트레칭 할 수 있어야 더 큰 것보다 그런 식으로.
개인적으로 나는 그저 그런 단순한 것으로 시작한 다음 몇 가지 방법으로 놀아 본 다음에는 좀 더 읽고 어쩌면 그리드 시스템을 도입 해보십시오.
실제로 HTML/CSS3에서 프런트 엔드를 구축하려는 경우 CSS3 플렉스 박스 레이아웃을 사용하기 만하면됩니다 (IE 및 이전 버전의 브라우저를 지원하려면 백분율로 "플로트"를 사용할 수도 있습니다). 열
수 ...하지만 그리드 시스템은 반응 형 웹 디자인과 함께 무엇을해야합니까 :하지만 조금) 더 어렵다? 아마도 유체 격자를 만들려면 –
? 아니면이 그리드 시스템에 대한 이해가 잘못 되었나요? –