MJML의 응답 성 <mj-attributes>

Question

MJML을 사용하여 전자 메일 서식 파일을 만들 때 전자 메일 서식 파일에 회전식 기능을 제공합니다. 다음은 샘플 코드입니다. 속성을

<mj-carousel icon-width="30px" tb-width="20px"> 
    <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" /> 
    <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" /> 
    <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" /> 
</mj-carousel> 

보시다시피, tb-width 제어 회전 목마의 폭 썸네일을 (icon-width 및 tb-width 나를 추가 한), 나는 그렇지 않으면 모바일 화면에 갈 때 작게 tb-width의 값을 변경하려면 모든 화면 크기를 교차하는 하나의 값을 고수해야합니다.

@media all and (max-width: 480px) { 
    [tb-width] { 
     width: 50px !important; 
    } // this is not working 
} 

가 그럼 난 위의 코드의 official document

@media all and (max-width: 480px) { 
    div[style*="tb-width:20px;"] { 
     width: 300px !important; 
    } 
} 

없음 작동하지 않습니다에 따라이 시도 :

나는이 시도.

어떻게이 문제를 해결합니까? 미리 감사드립니다. mjml 여유 채널 @dermothghes에 대한

Answer 1

덕분에, 여기에 솔루션입니다 :

이 모든 mjml 구성 요소는 출력 HTML에 맞습니다 CSS 클래스있을 것이다, 우리가해야 할 무엇 를 컴파일하는 것입니다. mjml 파일을 먼저 찾고 출력에서 ​​해당하는 CSS 클래스를 찾으십시오. 내 질문에

이 작동합니다 :

@media all and (max-width: 480px) { 
    .mj-carousel-thumbnail { 
     width: 50px !important; 
    } 
} 

.mj-carousel-thumbnail는 mj-carousel-thumbnail mjml 구성 요소에서 생성 된 클래스입니다.