CSS 그리드 레이아웃에 em 또는 percentage를 사용합니다.

Question

나는 3-4 페이지 웹 사이트에서 일하고 있습니다. 대부분의 페이지에서 jQuery, jQuery UI 및 Ajax 호출을 사용합니다. 픽셀 단위로 코드를 작성하지 않기를 바랍니다.

지금까지 나는 해결책을 찾고 며칠을 보냈다. 내가 원하는 것을 볼 수 없기 때문에 머리가 돌고있다. 나는 그것이 반응적이고 브라우저 크기의 변화에 ​​잘 적응할 수 있도록 웹 사이트를 레이아웃하는 최선의 방법을 결정하려고합니다. 백분율 또는 em을 사용하여 디자인 된 페이지는 고정 된 픽셀 레이아웃을 사용하는 페이지보다 훨씬 더 크기가 조정 된 것으로 보입니다.

잘 모르겠지만 골든 그리드 또는 일부 다른 것 같은 "그리드"를 사용하면 과잉이라고 생각합니다. 이런 식으로 생각하고 있니?

#container { 
    max-width: 75em; 
    margin: 0 auto; 
} 

#primary { 
    float:left; 
    width: 25%; 
} 

#content { 
    float:left; 
    width:50%; 
} 

#secondary { 
    float:left; 
    width:25%; 
} 

너비에 백분율을 사용해야합니까? 아니면 어떻게해야합니까? 나는 좋은 제안을 얻을 수 있기를 바랍니다. http://grids.heroku.com/을 당신이 그것을 다운로드/미리 볼 때 유체 폭 옵션을 선택

감사

Answer 1

이를 사용할 수 있습니다.

Answer 2

첫 번째 경우 : 귀하의 경우 비율을 사용하십시오. em은 font-size를 기준으로하는 반면, 백분율은 부모 요소의 방향을 나타냅니다. 브라우저 크기에 따라 사이트의 크기를 조정하려면 %를 사용하고 사용자가 글꼴 크기를 변경할 때마다 사이트의 크기를 조정하려면 em을 사용하십시오.

몇 가지 추가 아이디어 : 내 경험 %의 선택, PX에서

는 엠 (따라서 및 웹 사이트의 목표) 프로젝트에 따라 달라집니다.

사이트가 일종의 포트폴리오 인 경우 픽셀 기반 레이아웃을 사용하는 것이 좋습니다. (대부분의 사람들은 그것들을 작품의 디지털 버전으로보고 (prelayouted) 초안과 똑같이 보이기를 원합니다). 이렇게하면 좋은 결과를 얻을 수 있지만 사이트 크기를 조정할 때 문제가 발생할 수 있습니다 (예 : 텍스트가 커짐).

상대적으로 확장 성이 뛰어나므로 (분명히) 상대 시스템이 더 좋습니다. 컨테이너 규모가 적절하다는 보장이 있기 때문에 사용자 친화적 인 경우가 많습니다. 사이트에 더 액세스하기 쉽게하려면이 옵션을 사용하십시오.

픽셀 기반/상대 레이아웃을 사용하면서도 다른 문제는 해결할 수 있습니다. 종종 전체 레이아웃은 % 기반이지만 일부 컨테이너는 픽셀 기반입니다.

JS를 사용하여 사이트를 개선 했으므로 사이트를 개선하거나 사이트의 크기를 변경하거나 다른 작업을 수행 할 수 있습니다 (필자는 권장하지 않지만 실제로는 필요하지 않음) 모두가 JS를 사용하지 않는다는 것입니다 (그러나 이것은 다른 이야기입니다).