NG 스타일의 동적

Question

이 코드와 함께 md-card이 있습니다

<md-card ng-style="{ width: pageWidth > 900 ? '40vw' : '80vw' }">...</md-card> 

pageWidth이 $(window).width()에 결합 $scope 변수입니다.

$scope.pageWidth = $(window).width(); 
$(window).resize(() => { 
    $scope.pageWidth = $(window).width(); 
    console.log('page width: ' + $scope.pageWidth); 
}) 
$(document).ready(() => { 
    $(window).resize(() => { 
     $scope.pageWidth = $(window).width(); 
     console.log('page width: ' + $scope.pageWidth); 
    }) 
}) 

스타일은 페이지가로드 될 때 올바르게 적용되지만 수동으로 페이지의 크기를 조정할 때는 적용되지 않습니다. 두 번째 코드 블록에서 볼 수 있듯이 핸들러에 console.log 문을 추가 했으므로 $scope.pageWidth이 변경되는 모든 픽셀의 픽셀로 업데이트된다는 것을 알고 있습니다. 그러나, md- 카드의 너비는 결코 하나에서 다른 것으로 바뀌지 않습니다. 무슨 일 이니?

그리고 이것을 중복으로 표시하기 전에 사람들이 이전에 물어 본 적이 있지만 내 상황에 맞는 대답이 아닌 방식으로 질문했습니다.

Answer 1

미안 해요, 난 당신이 첫 번째 줄에 오타가되어야합니다 가지고 다음이 기타에 대한 답변을 게시하고 있지 않다 :

<md-card ng-style="{ width: pageWidth > 900 ? '40vw' : '80vw' }">...</md-card> 

하지만 난 당신이 더 많은 일을 할 수 있습니다 무엇을하고 있는지 볼 수있는 것과

효율적으로 정상적인 CSS를 사용 - 자바 스크립트 로직을 넣을 필요가 없습니다. 또한 AngularJS $ 윈도우 (당신은 그것을 주입해야합니다) 대신 전역 윈도우 개체를 조언하고 Angular 응용 프로그램과 Jquery DOM 조작에서 Jquery를 사용하는 것에 반대합니다. 정말 필요한 경우가 아니라면 (그리고 다시 말하지만) 정말 필요합니다.

확인 미디어 쿼리에 대한 링크 :

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

당신은 당신이 쉽게 최대 폭 및 최대 높이도 최소 너비/높이 및 해결할 수있는 여러 가지의 톤을 확인할 수 있습니다 것을 볼 수

순수 CSS에 대한 문제와 AngularJS와 혼합 된 Javascript/Jquery에 대한 필요성이 없습니다. 당신이 그것을 각 요소에 대해보다 구체적인 추가 클래스를 필요로하고 미디어 쿼리를 변경하는 경우

@media screen and (max-width: 900px) { 
    md-card { 
    width: 80vw; 
    } 
} 
@media screen and (min-width: 901px) { 
    md-card { 
    width: 40vw; 
    } 
} 

는 물론이 모든 MD-카드 요소에 전 세계적으로 다음과 같습니다

귀하의 CSS는 무언가 같이 될 것입니다.