Polymer app-grid 레이아웃을 사용하여 중단 점 만들기

Question

Polymer의 app-grid 요소 (도우미 클래스)를 사용하면 반응 형 격자 레이아웃을 만들 수 있습니다. 주어진 Polymer Example은 세 개의 목록 항목이 서로 나란히 배치 된 레이아웃을 만듭니다.

작은 화면에서 그리드를 3 열에서 1로 반응 적으로 변경하려면 중단 점을 선언해야합니다. 이 설명서에서는 @media 규칙 내에서 사용자 정의 속성을 정의하는 방법에 대해 설명합니다. (위 링크)

변경할 수있는 미디어 규칙을 가져올 수 없습니다. Polymer의 @media 규칙에 관한 비슷한 질문을 발견했지만 항상 철 매체 쿼리와 관련하여 답변했습니다. 이제 Polymer 문서에는 @media가 나와야 할 방법이 있어야한다고 생각합니다.

나는 그렇게처럼 사용하여 시도했지만 작동시킬 수 없습니다 :

<style include="app-grid-style"> 
    :host { 
     --app-grid-columns: 3; 
     --app-grid-item-height: 200px; 
     --app-grid-gutter: 20px; 
    } 
    @media (max-width: 600px) { 
     :host { 
     --app-grid-columns: 1; 
     } 
    } 
    </style> 

Answer 1

창 크기를 조정할 때 그들은 항상 확인 모든 사용자 정의 속성이 올바르게 적용하기 위해, this.updateStyles를 호출 demos에서 찾고있다. 당신이 대신 Polymer.updateStyles()를 호출해야합니다 주 문서에서 요소의 외부 애플리케이션 그리드를 사용하는 경우

불행히도이 정보는

attached: function() { 
    this._updateGridStyles = this._updateGridStyles || function() { 
     this.updateStyles(); 
    }.bind(this); 
    window.addEventListener('resize', this._updateGridStyles); 
    }, 

    detached: function() { 
    window.removeEventListener('resize', this._updateGridStyles); 
    } 

... 워드 프로세서에서 누락되었습니다.