본문 클래스 및 미디어 쿼리를 기반으로 콘텐츠 레이아웃을 선택하려면 어떻게해야합니까?

Question

그래서 여기에 문제가 있습니다. 나는 Susy에 대해 조금 익숙하다. 그래서 이것을 달성하는 가장 좋은 방법은 확실치 않지만, body 클래스와 이미 설정되어있는 미디어 쿼리에 기반한 .hfeed div에 레이아웃을 적용하려고한다. .

여기 왜 있습니다. 나는 WordPress에 이것을하고 있는데 CSS 클래스를 사용하여 스타일이 다른 레이아웃이 몸에 적용됩니다. 특히 두 클래스는 .full-width-content 및 .content-sidebar입니다. 전체 컨테이너를 스팬하거나 현재 정의 된 영역에 각각 앉히려면 선택기가 필요합니다. 따라서 스타일을 지정하려는 특정 선택기는 ". full-width-content .hfeed"및 ".content-sidebar .hfeed"가됩니다. 다른 컨테이너를 포함하도록 설정을 시도했지만 작동하지 않습니다.

이 섹션을 정의 된 그리드에서 분리하고 클래스별로 선택해야합니까? 그런 다음 미디어 쿼리를 수행합니까?

수세에서이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

//susy grid definitions, footer sits outside the susy grid def 

#wrap { 
    @include container($total-columns, $break-tablet, $break-desktop); 

    @include at-breakpoint($break-tablet) { 
     #header  { @include span-columns($break-tablet omega); } 
     #title-area { @include span-columns(5, $break-tablet); } 
     #header .widget-area { @include span-columns(4 omega, $break-tablet); } 
     #nav  { @include span-columns($break-tablet omega); } 
     .hfeed  { @include span-columns(6, $break-tablet); } 
     #sidebar { @include span-columns(3 omega, $break-tablet); } 
    } 

    @include at-breakpoint($break-desktop) { 
     #header  { @include span-columns($break-desktop omega); } 
     #title-area { @include span-columns(5, $break-desktop); } 
     #header .widget-area { @include span-columns(5 omega, $break-desktop); } 
     #nav  { @include span-columns($break-desktop omega); } 
     .hfeed  { @include span-columns(7, $break-desktop); } 
     #sidebar { @include span-columns(4 omega, $break-desktop); } 
    } 
} 

Answer 1

나에게 이것이 CSS 특이성의 문제입니다. 나는 당신이 Twenty-Eleven과 같은 것에서 아이 테마를 만들고 있다면 WordPress의 슬픈 경험에서 이것을 많이 알고 있습니다. 따라서 변경을 시도하고 있지만 작동하지 않는 경우 - 요소를 검사하고 규칙이 다른 스타일에 적용 또는 무시되는지 확인하십시오. 당신이 이미 WordPress 테마에 많은 문제가 있다고 생각 했으리라 확신합니다.

어떻게 설정하여 CSS의 구조에 따라 :

모바일 먼저 • - 작은 화면

에 작은 화면을 큰 화면에 • 큰 화면

다음과 같을 수 코드 :

기본 스타일 크고 작은 화면의 CSS 상단 - 처리 된 첫 번째> 다음으로> 화면 크기가 변경 될 때 해당 지시어를 무시하는 미디어 쿼리> 변경 될 모든 사항이 여기에 표시됩니다.

/* 기본 스타일 */ 몸 {...}

/* 스마트 폰의 스타일 */

@media 쿼리 {

body.class의 .container {...} 이 당신을 도와 여부, 난 그냥 당신에게 방향을 제시하기 위해 노력하고있어 경우

}

는 잘 모르겠어요. 나는 다른 사람들이 이것에 대해 무엇을 말해야하는지에 관심을 가질 것이다.

WordPress 테마 및 SASS로 작업 할 때 유의할 점은 CSS Specificity의 비용을 이해하는 것입니다. 페이지를 생성하는 데 더 많은 시간을 투자하면됩니다. 너무 구체적으로 SASS를 사용하는 것은 매우 쉽습니다.

행운을 빌며 나의 친구. 미안하다면 도움이되지 않습니다.