얼마 전에 모바일 퍼스트의 개념을 논의하는 코드 초보자 채팅이 있었습니다.

액체 오류: 내부

많은 사람들이 모바일 퍼스트 개발이 일시적인 유행 또는 유행어일 뿐이라고 응답했습니다. 그러나 나는 동의하지 않았다. 보시다시피 모바일 퍼스트 개발은 휴대폰에서 작동하는 모든 것이 컴퓨터에서도 작동한다는 가정에서 작동합니다. 반대로?

액체 오류: 내부

반응형 디자인의 개념은 이러한 관찰을 기반으로 합니다. 사이트 디자인을 구현하고 다양한 화면 크기를 지원할 때 가장 작은 화면에서 어떻게 보일지 먼저 생각하세요. 기본값으로 설정하세요! 그런 다음 더 많은 공간을 확보하면서 더 큰 화면에 맞게 조정하십시오. 그렇게 하면 항상 상황에 맞는 스타일을 지정하고 작은 화면에 맞게 적극적으로 최적화할 수 있습니다.

모바일용 스타일링

내 사이트를 예로 들어 보겠습니다. h1 태그가 있는 탐색 모음이 있습니다. 내 페이지의 다른 요소h1에 하단에 여백이 있도록 스타일을 지정했지만, 이 경우 세로 탐색에 원하지 않는 공백이 생깁니다!

또한 내 탐색에서 이 특정h1이 더 굵은 글꼴 두께를 갖기를 원합니다. 그런 것들을 추가해 봅시다.

#header h1 {
  font-weight: 900;
  margin-bottom: 0;
}

내 휴대 전화에서 이 모양을 매력적으로 보이게 하기 위해 다른 작업을 수행할 필요가 없습니다. 그리고 그것은 여전히 ​​다른 크기의 장치에서 작동합니다.

표준 크기의 태블릿

음, 다시 생각해 보면 h1가 괜찮아 보이지만 내 태블릿에 세로 탐색 막대가 있고 사용할 수 있는 가로 공간을 사용하지 않는 것이 좀 이상합니다. 그래서 화면 크기가 조금 더 커졌을 때 페이지의 모습을 바꾸고 싶습니다.

미디어 쿼리가 들어오는 곳입니다. 미디어 쿼리는 스타일의 모든 섹션 범위를 특정 화면 크기로 지정할 수 있으며 이는 매우 강력합니다. 그러나 우리는 모든 것을 가장 작은 화면으로 기본 설정하고 있기 때문에 실제로 이 미디어 쿼리가 특정 크기보다 큰 화면에만 적용되기를 원합니다.

@media (min-width: 600px) {
  #header nav ul li {
    display: block;
  }
}

우리가 작업하고 있는 특정 픽셀 크기는 일반 태블릿 크기라는 점을 명심하십시오. 이러한 항목에 대해 여러 "권장"중단점이 있습니다.

자바스크립트로 한 번 더!

이 농담을 이해하지 못하는 사람들에게 죄송합니다.

그래서 더 좋아 보입니다. 이제 일반적인 수평 탐색이 있습니다. 그러나 이것이 이 작업을 수행하는 유일한 방법은 아닙니다. 반응형 디자인은 JavaScript를 사용하여 구현할 수도 있습니다.

skel.init({
    reset: 'full',
    breakpoints: {
        global: { range: '*', href: '/css/style.css'},
        narrow: { range: '-980', href: '/css/style-narrow.css'}
    }
})

전역 스타일은 항상 제자리에 있습니다.

우리는 여전히 CSS를 사용하여 다양한 스타일을 홍보하고 있지만 미디어 쿼리 대신 화면 크기에 따라 트리거되고 적절한 스타일시트를 사용하는 JavaScript 코드가 있습니다.

우와! 내 데스크탑 화면이 거대합니다!

자, 당신은 광대한 녹지와 무한한 가능성의 땅에 도착했습니다! 노트북 화면이 이렇게 고급스럽게 느껴질 줄 누가 알았겠어요. 이 시점에서 그리드의 행에 더 많은 항목을 표시하기 시작할 수 있습니다. 또는 이전에 수직이었던 것을 수평으로 표시하고 싶을 수도 있습니다. 더 많은 프레이밍? 그것은 당신에게 달려 있습니다! 세상은 당신의 굴이다!

@media (min-width: 775px) {
  #header h1 {
    margin-left: 5em;
    margin-bottom: 1em;
  }
}

우리는 미쳐서 그 여백을 다시 추가할 수 있습니다. 우리는 지금 방이 있습니다!

한 번에 하나의 요소를 보여주고 있는 그리드? Psh, 그것은 과거의 일입니다. 한 번에 세 개!

@media (min-width: 775px) {
 #speakwrap {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
    grid-template-areas: 'conference';
    grid-gap: 10px;
    padding: 1em;
  }
}

농담이야. 그러나이 시점에 도달했을 때 많은 유연성을 갖는 것이 정말 좋습니다. 실제로는 축소를 시도하는 것보다 가장 제한적인 지점에서 확장하는 것이 더 쉽습니다.

이와 같은 더 많은 콘텐츠를 찾고 있다면 다음을 확인하세요.