Milligram: 그리드 요소: 작은 화면에서 전체 너비, 큰 화면에서 작은 너비?

@mikeriley131 에 관심을 가져주셔서 감사합니다. 프로젝트에서 Milligram을 사용하기 시작하려고 했으나 큰 기능이 누락되었습니다. 수동으로 추가하는 것이 그리 어렵지는 않지만 CSS 프레임워크의 목적이 아니기 때문에 손으로 추가할 필요가 없습니다 :-).

안녕하세요 여러분 @mikeriley131 @guillaumemolter

현재 Milligram은 이 기능을 지원하지 않지만 아이디어가 마음에 들었습니다. 처음에 Milligram은 가능한 최소한의 스타일만 정의하는 가장 단순한 프레임워크가 될 목적으로 구축되었습니다. 따라서 대규모 프레임워크에서 쉽게 찾을 수 있는 기능이 많지 않습니다.

생각해 보겠습니다. 하지만 이 기능을 구현하는 방법을 알고 있고 PR을 제출하고 싶은 경우 주저하지 마십시오.

의견을 공유해 주셔서 감사합니다.

@cjpatoilo 당신과 내가 Milligram에 대해 좋아했던 바로 그 점에 동의합니다...최소한의...하지만 저에게 이것은 기본적이고 필수적인 반응형 디자인 기능입니다.

네, 감사합니다 @cjpatoilo. PR을 작성하게 되어 기쁩니다. 먼저 누락된 것이 없는지 확인하고 싶었습니다.

@mikeriley131 기꺼이 도와주고 PR 검토 등...

반응형 그리드 기능을 추가하기 위해 풀 요청 155 생성: https://github.com/milligram/milligram/pull/155

http://codepen.io/csuttie/pen/BWQMwM 의 데모

나는 미디어 쿼리를 가지고 놀았습니다. 저는 백엔드를 좋아하고 대부분의 시간을 Linux를 가지고 노는 사람입니다. 또한 CSS 전처리기에서 아무 것도 하지 않았습니다.

<strong i="6">@media</strong> (min-width: 495px) and (max-width:800px) {
    .row .column[class*=" column-"] {
        max-width: 100%;
    }
}

.row 와 .column 가 있는 자식 또는 손자( .row 와 .column 사이의 요소를 원하는 이유는 무엇입니까? ) 다음에 .column-* 가 옵니다. 여기서 *는 와일드카드입니다.

어떻게 생각해?

비고 : 495픽셀은 크롬이 허용한 최소 크기이기 때문에 제한입니다. 800px는 의미 있는 언급이 없습니다.

@cjpatoilo 오이!
@Lilja 코드 스니펫은 밀리그램 단위의 필수 요소라고 생각합니다. 모바일에서 전체 너비가 되도록 하려는 열에 .responsive 클래스를 배치하는 것이 좋습니다. 하지만 일부 %로 설정되어 있습니다.

<strong i="10">@media</strong> (max-width: 40rem) {
    .row .column.responsive[class*=" column-"] {
        margin-left: 0;
        max-width: 100%;
    }
}

따라서 모바일 화면에서는 다음과 같이 표시됩니다.

이 될 것입니다 :