화면 크기가 아닌 행동으로 생각합니다

Chase McCoy는 프로젝트 그리드를 만들 때“갭 문제”에 대한 훌륭한 기사를 썼습니다. 그의 주장은 다음과 같이 요약 될 수 있습니다. CSS의 마진을 사용하여 요소 간격을 설정해야합니까? 그는 Flexbox와 함께 사용하면 갭 속성이 충분히 완벽하지 않다고 지적했다.

 .grid {
  디스플레이 : Flex;
  갭 : 10px;
}

현재 Flexbox와 함께 GAP를 사용하는 것은 Firefox에서만 지원되며 여러 프로젝트에서이를 잊어 버렸습니다. 그러니 이것에주의를 기울이십시오.

어쨌든 Chase의 블로그 게시물에서 내가 가장 좋아하는 부분은 Andy Bell이 미디어 쿼리없이 반응 형 레이아웃을 만들기 위해 언급 한 기술입니다.

 .grid {
  디스플레이 : 그리드;
  그리드 갭 : 10px;
  그리드-템플릿-컬럼 : 반복 (자동 필, minmax (150px, 1fr));
}

이 CSS 코드의 기능은 다음과 같습니다.

• 열과 행 사이에 10px 간격이있는 그리드를 만듭니다.
• 각 열의 최소 너비는 150px입니다.
• 각 열의 너비 (1fr)가 동일합니다.
• 그리드는 가능한 한 많은 열을 자동으로 채워야합니다.

이 모든 것에 대한 가장 영리한 점은 이제 그리드가 minmax 로 인해 반응성을 효과적으로 구현한다는 것입니다. 브라우저가 크기가 커지면 그리드는 다음과 같이 더 적은 수의 열에 자동으로 조정됩니다.

미디어 문의가 전혀 필요하지 않습니다! 물론,이를 수행하는 몇 가지 다른 방법이 있지만,이 접근법은 미디어 쿼리를 피하기 때문에뿐만 아니라 새로운 방식으로 구성 요소를 설계하고 구축하는 것에 대해 생각하도록 가르치기 때문에이 접근법은 영리하다고 생각합니다.

체이스 계속 :

이 기술을 사용하면 브레이크 포인트를 사용하여 프로젝트가 쌓아야하는 화면 크기를 지정하는 대신 요소가 쌓기 전에 해야하는 최소 크기를 지정합니다. 개발자가 스크린 크기 관점이 아닌 동작에서 반응 형 디자인에 대해 생각하도록 장려하기 때문에 이것을 좋아합니다.

"화면 크기보다는 행동"은 구성 요소 설계에 대해 생각하는 훌륭한 방법입니다! 디자인 시스템을위한 구성 요소를 만들 때 내가 가진 많은 문제는 화면 크기 (모빌 장치, 태블릿, 데스크탑 등)에 대해 생각하고 이러한 구성 요소를 이러한 제한 사항에 조정하려고했기 때문입니다.

행동 적 관점에서 생각하는 것은 우리가 사용하는 화면이나 장치 너비 외에 구성 요소에 영향을 미치는 다른 많은 요소가 있기 때문에 항상 더 효과적입니다 . 어쩌면 우리는 그 구성 요소가 다른 구성 요소에 맞기를 원할 것입니다. 또는 비교를 위해 보조 텍스트를 정렬하려고합니다.

어느 쪽이든, Chris는 다음과 같이 썼 듯이 컨테이너 쿼리를 소유하기 전에 화면 크기가 아닌 행동의 관점에서 생각하는 것이 실제로는 불가능합니다.

컨테이너 쿼리는 항상 CSS에 필요한 최상위 개선 목록입니다. 일반적인 견해는 컨테이너 쿼리가있는 경우 페이지 크기에 따라 많은 글로벌 미디어 쿼리를 작성하지 않을 것입니다. 우리는 실제로 더 많은 로컬 컨테이너를 제어하려고 노력하고 있기 때문에, 우리가이를 위해 미디어 쿼리를 사용하는 유일한 이유는 그것이 우리가 CSS에서 가장 좋은 도구이기 때문입니다. 나는 이것을 완전히 믿습니다.

위 내용은 화면 크기가 아닌 행동으로 생각합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!