부트스트랩 없이 무엇을 사용해야 하나요?

부트스트랩 없이 무엇을 사용해야 하나요?

부트스트랩 없이 Foundation을 사용할 수 있습니다. 일반적으로 개발 엔지니어는 Bootstrap을 사용하고 프런트 엔드 개발자는 Foundation을 먼저 사용합니다.

Bootstrap과 Foundation 사이에는 많은 중요한 차이점이 있지만, 한 가지만 기억하시면 될 것 같습니다.

ZURB와 Twitter의 두 가지 디자인 철학은 프레임워크 이름에서 알 수 있듯이 매우 명확합니다. : 부트스트랩은 부트스트래핑을 의미합니다. 즉, 프로젝트에 필요한 모든 것을 처리하려고 합니다. 그리고 Foundation은 생성을 의미합니다. 즉, 프로젝트에 강력한 창의성을 제공한다는 뜻입니다.

이 관점을 유지하면서 이제 더 나열하겠습니다. 둘 사이의 주요 차이점:

1. UI 요소

Foundation은 제한된 수의 요소만 배열하는 반면 Bootstrap은 상상할 수 있는 모든 요소를 ​​제공합니다.

ZURB의 Foundation 디자인 목표는 사전 정의된 요소를 사용하더라도 UI 요소는 우리 웹사이트와 너무 유사해 보이지 않아야 합니다.

반면에 Bootstrap은 잘 정의된 모든 UI 요소를 제공하려고 합니다.

2 REMs VS Pixels

Foundation은 REM을 사용하는 반면, Bootstrap은 픽셀을 사용합니다.

픽셀을 사용한다는 것은 모든 장치와 화면 크기에서 높이, 너비, 패딩, 여백을 정확하게 정의해야 함을 의미합니다. 왜냐하면 서로 다른 장치는 종종 매우 다른 효과를 표시하기 때문입니다.

이제 Foundation 5는 대신 REM을 사용합니다. EM을 사용하면 EM 캐스케이드 문제를 피할 수 있습니다. http://css-tricks.com/font-sizing-with-rem/

REM을 사용하면 글꼴 크기: 80%를 직접 사용할 수 있습니다. 전체 구성 요소와 하위 구성 요소가 20% 더 작아졌습니다.

REM을 통해 픽셀의 세부 사항에서 벗어날 수 있으므로 REM을 사용하여 처리하는 것이 매우 가치가 있습니다.

Foundation도 마찬가지입니다. 픽셀을 REM으로 변환하는 sass mixin 방법을 제공하므로 픽셀 사고 방식을 계속 사용하여 페이지를 정의할 수 있습니다.

.element {
  width: rem-calc(10px); // will be converted to REMs
}

3. 유연한 그리드 VS 사전 정의된 그리드

Foundation의 그리드는 너비에 자동으로 적응할 수 있습니다. Boostrap에는 주류 장치 및 화면에 맞게 미리 정의된 여러 가지 그리드 크기가 있습니다.

Bootstrap은 브라우저 너비를 변경하면 갑자기 그리드를 변경합니다.

Foundation은 현재 브라우저 너비에 유연하게 적응합니다. 자동으로 적응하는 새로운 기술적 수단은 동시에 Transformer와 동일한 효과를 나타낼 수 있습니다.

Foundation은 그리드가 변경될 때 소형, 중형 및 대형의 두 가지 주요 사항을 가지고 있으며 모든 작업은 축소 및 확대에만 적용됩니다. 미리 정의된 화면 크기가 필요하지 않으며, 더 중요한 것은 화면 크기에 따라 다양한 스타일을 정의하도록 권장하는 것입니다.

Bootstrap을 사용하면 고정 또는 다중 그리드를 얻을 수 있으므로 설정이 필요합니다.

Foundation과 Sass를 사용하면 가장 큰 그리드 크기(중간 및 소형은 자동으로 계산됨), 대형 화면의 열 수, 작은 화면의 열 수를 자유롭게 조정할 수 있습니다.

4. 모바일 장치 우선 VS 모바일 장치도 지원

Foundation은 네 모서리 화면을 염두에 두고 설계되었습니다. Bootstrap은 휴대폰, 태블릿, 데스크톱 및 초대형 화면 데스크톱으로 미리 구분되어 설계되었습니다.

빌딩 모바일 우선 웹사이트는 확실히 더 큰 화면에서 사용할 수 있다는 것을 의미합니다. 따라서 Foundation에서는 모바일 우선을 권장합니다.

Foundation의 Sass Media Query Mixin을 사용하면 쿼리할 특정 미디어 쿼리가 없다는 것을 알게 될 것입니다. 모바일 장치가 무엇인지, 그러나 미디어 쿼리를 사용하여 더 큰 화면에 어떻게 표시되어야 하는지 정의합니다.

무언가를 디자인할 때 데스크탑을 먼저 고려한다면 작은 화면을 지원할 때 큰 문제가 있을 수 있으며, 휴대폰을 먼저 생각하면 사용자에게 가장 중요한 것에 집중하고 공간 활용도를 높일 수 있습니다.

5. 커뮤니티

Bootstrap에는 더 큰 커뮤니티가 있어야 합니다.

Bootstrap의 가장 큰 특징은 매우 거대하고 포괄적이며 원하는 거의 모든 것을 찾을 수 있다는 것입니다.

Foundation을 선택하면 아마도 자립해야 할 것입니다. 마스터하세요. 거의 모든 솔루션은 Bootstrap용이므로 직접 구축할 수만 있습니다.

위 내용은 부트스트랩 없이 무엇을 사용해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!