미디어 쿼리가 없는 응답 CSS 레이아웃

2012년에 미디어 조회를 CSS규범에 도입하여 응답식 웹 개발 시대를 열었다.CSS가 점점 전면적으로 변함에 따라 우리는 현재 일부 단점, 일부 설비, 심지어 사용자의 휴대전화가 가로에 있을 때 완전히 다른 외관을 내놓을 수 있다!
CSS를 배울 때 웹 사이트를 구축하고 데스크톱 레이아웃에 맞는 위치에 놓은 다음에 미디어 조회를 추가하여 브라우저의 넓이가 휴대전화의 화면 넓이로 줄어들 때 페이지 요소에 영향을 미치는 것을 강력히 권장합니다.내가 디자인한 화면은 320픽셀까지 좁다.아이폰4/아이폰SE의 너비.
그러나 만약에 완전히 응답하는 레이아웃을 만들 수 있다면 데스크톱에서 시작하여 페이지가 너무 좁아지기 시작할 때 스마트하게 페이지에 자신의 공간을 분배하면 어떻게 해야 합니까?

유연성 - 당신의 원소가 변할 때

한 가지 형식의 입력을 예로 들자.일부 입력은 사용자가 긴 텍스트를 입력해야 하며, 예를 들어 전자 우편 주소와 차이가 매우 크다.몇몇 길지 않은 것들, 예를 들면 이름 필드.만약 요소가 같은 줄에 놓을 수 있다면, 특히 표에 입력되어 서로 연결될 때, 같은 줄에 놓기를 원할 것입니다.그리고 사용 가능한 화면 폭이 좁아지기 시작하면, 자신의 선로에서 전체 너비로 바뀐다.
화면 크기를 조정하고 핸드폰에서 화면 방향을 바꾸거나 HTML/CSS 옵션을 열어 폼의 폭을 줄인다.입력이 자신의 줄로 이동하는 것을 보실 수 있습니다!
비밀은 flex의 힘: 자동에 있다.

input {
  max-width: 100%;
}

input.fill {
  flex: 1 0 auto;
}

input#fname {
  flex: 1 0 240px;
}

input#email {
  flex: 1 0 350px;
}

flex-wrap: wrap를 용기에 설정한 후 하위 원소가 너무 좁아지면 하위 원소는 새 줄로 내려가려고 시도합니다.브레이크를 설정하지 않으면 해당 컨텐트와 채우기를 사용하여 최소 너비를 결정합니다.
이 예에서 전화 필드와 제출 단추는 모두 flex: auto로 설정하고 클래스 이름fill에 추가됩니다.이름과 이메일은 flex-basis를 통해 픽셀 폭을 설정합니다. 이것은 flex 속기의 세 번째 값입니다.이 너비는 전체 너비(1inflex: 1 0 ___px로 늘어나는 것을 확정하는 기초이며, 전제 조건은 공간이 사용 가능하다는 것이다.
마지막으로 설정max-width: 100%은 모든 입력이 용기의 폭을 초과하는 것을 방지합니다.정말 못생겼어!
따라서 어떤 요소가 그들의 줄에 마지막으로 나타날지 알면 줄의 첫 번째 요소가 모든 내용을 자신의 줄에 언제 넣을지 결정할 수 있다.아주 깔끔해요!

격자-당신의 원소가 변하지 않을 때

Grid는 동네에서 가장 멋있는 아이다.Flexbox 마니아들은 그것을 두려워하지만, 나는 웹 사이트 건설에서 흔히 볼 수 있는 문제를 해결하기 위해 다양한 해결 방안에 잠입해 있다는 것을 발견했다.이런 상황에서 응답성 레이아웃을 실현할 수 있지만 코드 줄 수는 flexbox보다 적다.
당신이 만들고 싶은 모든 물품의 폭과 크기가 서로 같다. 예를 들어 사진 라이브러리나 블로그 게시물의 격자 같은 것은 격자가 매우 잘 작동한다.
복잡한 모양을 통해 레이아웃을 구현할 수 있습니다grid-template-columns.

.grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

(250px를 한 줄에 더 많은 열을 수용할 수 있도록 설정할 수 있습니다. 나중에 미디어 조회를 통해 최소 크기를 변경하려면 rem까지 설정할 수 있습니다.

repeat 모든 그리드 항목에 크기 조정 논리 적용

auto-fill 메쉬 행을 채우려고 합니다.auto-fit 컨테이너의 전체 너비는 무시하고 항목의 최소 너비를 봅니다.둘 다 다른 상황에서 사용할 만하다!이 점을 더욱 깊이 이해하려면 Sara Soueidan's article on CSS Tricks

minmax 메쉬 항목이 가질 수 있는 최소 및 최대 너비를 결정할 수 있습니다.내 예에서, 그것은 250px까지 좁을 수도 있고, 용기가 허용하는 범위까지 넓을 수도 있다.500px는 두 개의 물품만 수용할 수 있기 때문에 450px일 때 한 개의 물품은 전체 폭을 연장할 수 있다.

flexbox에 비해 flexbox의 주요 장점은 grid-gap의 가입으로 격자 항목 주변에 공백을 만드는 대량의 압력을 없앴다는 것이다.Bootstrap은 열 주위에 15px의 간격을 두는 것을 좋아하지만, 나는 8의 배수로 작업하면 페이지 내용에 따라 위로 확장하기 쉽다고 생각한다.
만약 CSS 격자가 당신에게 절대적으로 낯설지만, 그 속에 깊이 들어가기를 원한다면, 나는 당신에게 책갈피 Grid by example by Rachel Andrew 와 아래의 내용을 사용하라고 강력히 건의합니다.

격자에 맞지 않는 경우 Flex 지원

이제 CSS 격자선 사양은 단일 격자선 항목을 자동으로 채우기 어렵습니다.grid-column 격자 항목을 뛰어넘는 열의 수는 고정되지 않지만 같은 줄의 다른 항목은 고려하지 않습니다.만약 당신의 동적 격자 항목이 어디에서 시작될지 알고 있다면, 당신은...

.grid-item {
  grid-column: 4 / -1;
}

네 번째 열에서 시작하여 항목을 줄 끝까지 확장합니다.보시다시피 같은 줄에 있는 현식 격자 항목을 알아야 합니다.이건 전혀 반응이 없어!
읽어주셔서 감사합니다!