14

में एक विशिष्ट ब्रेकपॉइंट के लिए सीएसएस कैसे लिखना है, मैं एक div के लिए सीएसएस लिखने की कोशिश कर रहा हूं, जिसे केवल एक विशेष ब्रेकपॉइंट मारा जाता है, उदाहरण के लिए लागू होना चाहिए। एसएम, एमडी या एलजी।कोणीय सामग्री

मैं कोणीय-सामग्री (https://material.angularjs.org) का उपयोग कर रहा हूं।

मुझे पता है कि यह मीडिया प्रश्नों @media (max-width: 480px) { ... } का उपयोग करके किया जा सकता है लेकिन मैं ऐसा करने के कोणीय-भौतिक तरीके की तलाश में हूं।

+0

जांच लेआउट अनुभाग:: https:

var app = angular.module('MyApp',['ngMaterial']); 

2. इंजेक्षन $ नियंत्रक

app.controller('TabCtrl', ['$scope','$mdMedia', function($scope,$mdMedia){ var thisCtrl = this; $scope.$mdMedia = $mdMedia; }]); 

3. अब के रूप में रोब द्वारा वर्णित पहले $ mdMedia उपयोग करने के लिए mdMedia // सामग्री .angularjs.org/नवीनतम/#/लेआउट/विकल्प – nitin

+0

मैं इससे पहले चला गया हूं ... सुनिश्चित नहीं है कि यह मेरी वर्तमान समस्या को हल करता है – Tarun

+0

या आप कर सकते हैं: @media (min-width: $ layout-breakpoint-xs) {बी में पसंद है ootstrap। – owca

उत्तर

22

मुझे लगता है कि के लिए $ mdMedia सेवा का उपयोग कर रहा है, देखें:

https://material.angularjs.org/latest/#/api/material.core/service/ $ mdMedia

इसके अतिरिक्त आप सीधे उदाहरण, एक टेम्पलेट में उपयोग कर सकते हैं एक एनजी स्तरीय निर्देश के साथ:

// In your controller: 
$scope.$mdMedia = $mdMedia; 

// In your template: 
<div ng-class="{sm: $mdMedia('sm'), md: $mdMedia('md'), lg: $mdMedia('lg')}">...</div > 
+0

जब कोणीय-सामग्री का उपयोग करने की बात आती है तो मुझे उत्तरदायी सारणी के बजाय MaterializeCss कार्यान्वयन शामिल किया गया है। अच्छा प्रो टिप! –

1

सामग्री breakpoints का उपयोग कर एक टैग के लिए कस्टम सीएसएस जोड़ना, कहते हैं कि मैं नीचे की तरह एक कस्टम सीएसएस है लगता है:

.textLeft{ 
text-align: left; 
margin-left: 24%; 
} 

और आप एक h3 में जोड़ने के लिए चाहते थे टैग करें यदि यह मोबाइल डिवाइस नहीं है, तो नीचे दिए गए चरणों का पालन करें।
1. मॉड्यूल में ngMaterial जोड़ें।

<div ng-controller="TabCtrl" layout="column"> 
<h3 ng-class="{'textLeft' : $mdMedia('gt-sm')}"> 
         {{user.name}}</h3> 
</div> 
संबंधित मुद्दे