Implementing Responsive web design with Angular Material UI is very easy. It is having predefined directives for different views (mobile, tablet, desktop). You need to understand them and use them in proper way.

Directives for showing elements

Observe the below table. These directives implements "display:block" CSS property based on width of device

show-smShows element on devices less than 600px wide.
show-gt-smShows element on devices greater than 600px wide.
show-mdShows element on devices between 600px and 960px wide.
show-gt-mdShows element on devices greater than 960px wide.
show-lgShows element on devices between 960px and 1200px wide.
show-gt-lgShows element on devices greater than 1200px wide.

Directives for hiding elements

Observe the below table. These directives implements "display:none" CSS property based on width of device.
hide-smhide element on devices less than 600px wide.
hide-gt-smhide element on devices greater than 600px wide.
hide-mdhide element on devices between 600px and 960px wide.
hide-gt-mdhide element on devices greater than 960px wide.
hide-lghide element on devices between 960px and 1200px wide.
hide-gt-lghide element on devices greater than 1200px wide.

Directives for setting width of elements

Observe the below table. These directives implements "width: %" CSS property based on width of device.The value must be 33,66,99 or multiples of 5 (5, 15, 30, 50...)
flexwidth percentage of element
flex-smwidth percentage of element on devices less than 600px wide.
flex-gt-smwidth percentage of element on devices greater than 600px wide.
flex-mdwidth percentage of element on devices between 600px and 960px wide.
flex-gt-mdwidth percentage of element on devices greater than 960px wide.
flex-lgwidth percentage of element on devices between 960px and 1200px wide.
flex-gt-lgwidth percentage of element on devices greater than 1200px wide.

Views 

Desktop

Here we have to hide mobile and tablet views and show the desktop view
hide-md hide-sm show-gt-md

Tablet

Here we have to hide desktop and mobile views and show the tablet view 
hide-gt-md hide-sm show-md

Mobile 

Here we have to hide desktop and tablet views and show the mobile view
hide-gt-sm show-sm

Example 1: Create Responsive Header

Observe below diagram. Desktop and Tablet and Mobile are having different views. Lets implement this with above directives.

HTML Code 

Observe below highlighted code. 

<md-toolbar>
      <div class="md-toolbar-tools" ng-hide="showSearchBarDiv">
        <md-button class="md-icon-button" aria-label="Icon">
          <md-tooltip>Icon</md-tooltip>
          <md-icon class="md-default-theme" md-svg-icon="fb.svg"></md-icon>
        </md-button>
        <h2>
          <span>Heading</span>
        </h2>
        <md-input-container md-no-float class="md-accent" flex="50" style="padding-bottom:0px;margin-left:25px" show-gt-md hide-sm hide-md>
           <md-icon style="color:wheat" class="material-icons">&#xE8B6;</md-icon>
           <input ng-model="searchInput" placeholder="Search here" style="color:wheat;padding-left:25px;margin-left:5px">
        </md-input-container>
        <span flex></span>
        <md-button class="md-icon-button" hide-gt-md show-sm show-md ng-click="showSearchBarDiv = true">
          <md-tooltip>Search</md-tooltip>
          <img src="search.png" style="width:24px;height:24px;"/>
        </md-button>
        <md-button class="md-icon-button" show-gt-sm hide-sm>
          <md-tooltip>Pen</md-tooltip>
          <img src="pen.png" style="width:24px;height:24px;"/>
        </md-button>
        <md-button class="md-icon-button" show-gt-sm hide-sm>
          <md-tooltip>Messages</md-tooltip>
          <img src="messages.png" style="width:24px;height:24px;"/>
        </md-button>
        <md-button class="md-icon-button" show-gt-sm hide-sm>
          <md-tooltip>User</md-tooltip>
          <img src="user.png" style="width:24px;height:24px;"/>
        </md-button>
        <md-button class="md-icon-button" show-gt-sm hide-sm>
          <md-tooltip>Settings</md-tooltip>
          <img src="settings.png" style="width:24px;height:24px;"/>
        </md-button>
        <md-button class="md-icon-button" hide-gt-sm show-sm>
          <md-tooltip>Menu</md-tooltip>
          <img src="menu.png" style="width:24px;height:24px;"/>
        </md-button>
      </div>
      <div layout="row" class="md-toolbar-tools" show-sm show-md hide-gt-md ng-show="showSearchBarDiv">
        <md-button class="md-icon-button" ng-click="showSearchBarDiv = false">
          <img src="back.png" style="width:24px;height:24px;"/>
        </md-button>
        <md-input-container flex="80" md-no-float class="md-accent" style="padding-bottom:0px;">
           <md-icon style="color:wheat" class="material-icons">&#xE8B6;</md-icon>
           <input ng-model="searchInput" placeholder="Search here" style="color:wheat;padding-left:25px;margin-left:5px">
        </md-input-container>
        <span flex></span>
        <md-button class="md-icon-button">
          <img src="search.png" style="width:24px;height:24px;"/>
        </md-button>
      </div>
</md-toolbar>

Example 2: Create Responsive Body

 Observe below diagram. There are 3 panels (Left side, news feed, right side). In desktop view, all 3 panels are visible. In tablet view, only left panel and news feed are visible. In mobile view, Only news feed is visible.

HTML Code

Observe below highlighted code. Here we are also using flex directive. Flex value specified based on the view
<div layout="row">
       <div class="panel" flex="20" flex-md="30" show-gt-sm hide-sm>Left Side Panel</div>
       <div class="panel" flex="60" flex-sm="100" flex-md="70">News Feed</div>
       <div class="panel" flex="20" show-gt-md hide-sm hide-md>Right Side Panel</div>
</div>

21 comments:

  1. this is very helpful. thank you.

    ReplyDelete
  2. Great article. Glad to find your blog. Thanks for sharing.

    web design training in chennai

    ReplyDelete
  3. The type of clients you agree upon to work with speaks a lot about you and your web design firm. Similarly, the grounds on which they delegated the responsibility on you to produce a design speaks a lot about them. creatives

    ReplyDelete
  4. Thanks for sharing with us.. It may useful for all
    Laptop Service in Chennai

    ReplyDelete
  5. At the point when a site is propelled, it showcases the brand character of the business. Taking a gander at a site, the viewers have finish thought regarding the business and its work forms.Web Design Victoria

    ReplyDelete
  6. Responsive web design is the answer to the varying sizes of monitors, tablets, and mobile phones. With so many screen sizes today, it's so hard to keep track and it's also very impractical to create a separate set of codes for each to ensure "proper viewing" of websites. responsive web design

    ReplyDelete
  7. Because the width and layout structure of normal design could not accept the mobile screen size. www.exza.my

    ReplyDelete
  8. With such a variety of screen sizes today, it's so difficult to follow along and it's likewise exceptionally illogical to make a different arrangement of codes for each to guarantee "legitimate review" of websites.Web Design Athens

    ReplyDelete
  9. These directives implements "display:none" CSS property based on width of device.web design tutorials

    ReplyDelete
  10. I want to hide some div if width in less then 1080 other wise show that div. How can i achieve this. Please suggest.

    ReplyDelete
  11. Never thought that, that think we can do to angular.js.

    Thanks bro.

    It will definality work well to design my Extra Catchy website

    ReplyDelete
  12. Hi,
    Nice info! Well explained concept and I will definitely try this. Thanks for sharing. If anyone is looking for website development services I suggest Dotz Web, one of the best web development company.

    ReplyDelete
  13. Very rare to find such a marvelous blog, I feel lucky reading this.
    wordpress website

    ReplyDelete
  14. waooo really...this is a great information... i have read very carefully ... Very nice Blog.. thanks to share valuable post
    Web Designing Company India

    ReplyDelete
  15. Good Information... Really Like it. Great Information for Designers...Thanks to share it.
    Kids Party Planner Delhi NCR

    ReplyDelete
  16. This is very good information to now days the web design is more powerful one in the business. Web Development Company in Chennai

    ReplyDelete
  17. Thank you very much for sharing your findings. I believe this research will be much helpful in coming up with different things.
    Best Digital Marketing Agency in Texas USA
    Best PPC Services in Chicago, USA
    Graphics Design Company in Chicago

    ReplyDelete
  18. In the early brilliant years of versatile web design, there were various reasons why specialists believed that web applications ought to dependably be designed first for use on a cell phone. internet marketing

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts