내 모든 프로젝트에 적합한 미디어 쿼리.

최소한의 CSS 코드로 모든 장치에 대한 미디어를 포함하는 디자인 스타일시트를 작성하는 것은 항상 어려운 일입니다. 작은 너비의 모바일, 모바일, 태블릿, Tab Pro, 작은 데스크톱, 노트북, 큰 데스크톱은 방문자가 모든 장치에 매우 잘 분산되어 있기 때문에 모두 똑같이 중요합니다. 웹 페이지 디자인은 더 나은 사용자 경험을 위해 장치 너비에 맞게 만들어져야 합니다.

웹 사이트용 반응형 CSS를 작성할 때 고려해야 할 모든 사항은 무엇입니까?

CSS 스타일시트 파일 크기

CSS 파일의 크기는 항상 고려해야 합니다. CSS가 크면 페이지 속도가 느려집니다. 모든 장치를 다루기 위해 각 장치에 특정한 CSS를 계속 작성할 수는 없습니다. 결국에는 많은 중복 코드가 있을 것입니다. 미디어 쿼리는 한 줄의 코드가 여러 장치를 지원할 수 있어야 합니다. 또한 작업을 줄이고 시간을 절약할 수 있습니다.

각 페이지에 렌더링된 CSS

전역 스타일시트를 사용하는 경우 해당 페이지의 디자인에 디자인의 10-20%가 필요할 때도 각 페이지에 대해 큰 단일 CSS를 로드해야 합니다. 가장 좋은 솔루션은 React JS 또는 Web Component와 같은 구성 요소 기반 프레임워크를 사용하는 것입니다. 여기서 구성 요소에 특정한 디자인을 작성할 수 있습니다.

모든 크기의 장치

오늘날 프론트엔드 디자이너의 최우선 과제는 사용 가능한 각 장치에 대한 디자인을 작성하는 것입니다. 페이지 레이아웃 및 디자인은 모두 장치에 따라 달라야 합니다. 그러나 그것은 다시 큰 스타일 시트로 끝날 것입니다.

위의 포인트를 관리하면서 떠오른 미디어 쿼리는 -

여기서는 일반적인 래퍼 컨테이너 클래스의 예를 들어 필요에 따라 업데이트하는 방법에 대해 설명합니다.

.app-wrap{
    max-width: 1542px;
}
.container{
    width: 82%;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

특정 디자인 CSS가 미디어 쿼리 섹션에 적용되지 않은 경우 여기에 있는 데스크탑 특정 디자인과 아래의 모든 장치 크기에도 적용할 수 있습니다. 웹 페이지의 최대 너비는 .app-wrap 컨테이너에 의해 제한되며 장치 너비가 광범위하게 변하므로 너비를 제한하는 것이 좋습니다.

@media only screen and (max-width: 1024px) {
    .container{
        width: 94%;
    }
}

Tablet Pro 전용 디자인. Check .container 클래스, 여백 및 패딩이 제공되지 않았으므로 위에 있는 CSS에서 가져오고 중복이 필요하지 않으며 너비가 94%로 지정되면 최대 너비가 1024px인 모든 장치에 대해 업데이트됩니다.

@media only screen and (max-width: 992px) {
    .container{
        width: 100%;
    }
}

표준 태블릿 크기의 특정 CSS입니다. 여기에서 클래스.container 너비를 100%로 업데이트했습니다. .container의 나머지 디자인은 Table Pro 및 데스크탑 디자인을 사용합니다.

@media only screen and (max-width: 767px) {
    .container{
        padding-left: 1em;
        padding-right: 1em;
    }
}

모바일 전용 디자인. 패딩을 업데이트하는 동일한.container 클래스를 고려하고 최대 너비가 767px인 모든 장치에 대해 업데이트됩니다. 위에 작성된 스타일의 너비와 여백이 있는 위치입니다.

@media only screen and (max-width: 364px) {
    .container{
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}

작은 크기의 모빌. 대부분의 경우 이러한 장치 크기는 글꼴 크기 및 여백 여백에 대한 약간의 업데이트가 필요하지만 대부분의 스타일은 이 위에 작성된 디자인에서 사용할 수 있습니다.

여기서 스타일의 순서는 매우 중요합니다. 이러한 미디어 쿼리를 작성하는 동안 최대 너비 제한만 사용하므로 이러한 스타일은 다양한 장치 크기에서 사용할 수 있습니다. 모바일 우선 디자인 패턴을 찾고 있다면 미디어 쿼리 흐름을 반대로 할 수 있으며 미디어 쿼리 없이 모바일 디자인을 작성하고 최소 너비 제한이 있는 미디어 쿼리를 계속 작성할 것입니다.

그것은 내 많은 시간을 절약하고 몇 줄의 코드도 절약합니다!