Responsive page in AngularJS

The web development design that focuses on the dynamic changes to the appearance of a website, which depends upon the screen size and orientation of the device on which we are viewing it. This whole process to meet the ends of the user is called Responsive web design (RWD). So, basically the experience of the user when they access the website from any device they should be able to gain the best experience. Nowadays, the user is able to access the websites using and of devices like mobile phones, tablets, PCs and laptops. So, the convenience gained by them should be our priority. So, to achieve this we use RWD.Responsive designs use only HTML and CSS.

View Port:

View Port refers to the users visible area. It varies according to the device.Mobile phones will have smaller ones as compared to computers.

Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
   <html>
     <head>
       <meta name="viewport" 
             content="width=device-width,
             initial-scale=1.0">
   </head>
<body>
  
<h2>GFG</h2>
<p>Apply the above in between the 
head tag for responsive webpages.</p>
  
</body>
</html>

chevron_right


This will help to view the webpage in 1×1 aspect ratio which will remove default functionality from the smartphone browsers and render the websites full-view which will allow the users to increase or decrease the size of the screen. 
 



In HTML5 meta was introduced.It helpd the browser to control the scalings and the dimensions.

width=device-width-Handles the width of the webpage.

initial-scale=1.0 part sets the initial zoom level(when the page is first loaded in the browser).

Grid-View:

Dividing the page into columns of mostly 12 grids which are approx to 100% of a total width of the screen.

Syntax:

* {
 box-sizing: border-box;
} 
.A{
width: 20%;
float: left;
}
.B{
 width: 80%;
float: left;
}

Responsive image with up and down scaling:-

image {
 width: 100%;
 height: auto;
}

max-width property:



Image will scale down but not scale up to be larger than its original size:

image {
max-width: 100%;
height: auto;
}

Syntax:

.video { 
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video iframe, 
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Responsive Typography:

Along with images and videos, it is very necessary to make text also responsive. 
The root element's font-size known as rem is used for this. 
@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.5rem;} } 
@media (min-width:1100px) { body {font-size:2rem;} } 

How it is done?

  • Browser Agent String
  • Use CSS media queries.
  • Service:

    • Determine the device type and  use appropriate partials.
    • ng-if and ng-switch to display required content.

    Custom Directives:

    No need to use ng-if and ng-switch to display the required content.More semantic approach.

    HTML Markup API:

    HTML Markup API

    layout(row|column)
    flex(integer  values)
    flex-order(integer values)
    flex-offset(integer values)

    layout-align

    (start | center | end | space-around | space-between start | center | end | stretch)



    layout-fill
    layout-wrap
    layout-nowrap
    layout-margin
    layout-padding
    show
    hide

    Breakpoints and Mediaqueries:

    When the contents of the website are responded according to the width of the device which allows the best possible layout to the user is called Breakpoints or media query breakpoints, since, they are used with Mediaqueries. There are 2 ways to apply the breakpoints.

    Media Query was introduced in CSS3 as a CSS technique.

  • Based on the device.

    Landscape

    @media screen
     and (device-width: 360px)
     and (device-height: 640px)
     and (-webkit-device-pixel-ratio: 3)
     and (orientation: landscape) {
     }

    Smartphone Portrait

    @media only screen and (min-width: 300px) {
    }

    Smartphone Landscape

    @media only screen and (min-width: 480px) {
    }

    iPads (portrait)

     @media only screen and (min-device-width : 768px) 
       and 
    (max-device-width : 1024px) 
       and
    (orientation : portrait) {
    ...
    }

    Tablet Portrait

    @media only screen and (min-width: 768px) {
    }

    Tablet Landscape/Desktop

    @media only screen and (min-width: 1024px) {
    }

    Tablet Landscape/Desktop(1200px)



     @media only screen and (min-width: 1200px) {
    ...
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <style>
    * {
      box-sizing: border-box;
    }
      
    /* Style the top navigation bar */
    .topnav {
      overflow: hidden;
      background-color: #32CD32;
    }
      
      
    .topnav a {
      float: left;
      display: block;
      color: #228B22;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
      
    /* Change color on hover */
    .topnav a:hover {
      background-color: #C0C0C0;
      color: black;
    }
      
      
    @media screen and (max-width: 800px) {
      .topnav a {
        float: none;
        width: 100%;
      }
    }
    </style>
    </head>
    <body>
      
    <h2>Responsive navigation </h2>
    <p>Resize the browser window to see the effect:
     When the screen is less than 800px, 
    the navigation will be displayed vertically 
    rather than of horizontally.</p>
      
    <div class="topnav">
      <a href="#">Link1</a>
      <a href="#">Link2</a>
      <a href="#">Link3</a>
    </div>
      
    </body>
    </html>

    chevron_right

    
    


  • Based on the content.
    @media only screen (min-width: 768px){
    ...
     }
    "or"
    @media only screen and (min-width: 768px) and (max-width: 959px){
     ...
     }
    Breakpoint

    MediaQuery (pixel range)

    xs

    ‘(max-width: 599px)’

    gt-xs

    ‘(min-width: 600px)’

    sm ‘(min-width: 600px) and (max-width: 959px)’

    gt-sm

    ‘(min-width: 960px)’

    md

    ‘(min-width: 960px) and (max-width: 1279px)’

    gt-md



    ‘(min-width: 1280px)’
    lg ‘(min-width: 1280px) and (max-width: 1919px)’
    gt-lg

    ‘(min-width: 1920px)’

    xl

    ‘(min-width: 1920px)’

    Advantages Of Using AngularJs for Responsive Design:

    • Creation of web applications faster with less effort-AngularJs uses HTML code. No need to write lengthy MVC pipelines. Fewer lines of code.
    • Secure and responsive web designs-Secure HTTP calls are made to establish communication with the server. RESTful APIs and web services help in this communication. A proper and ideal security major is to be taken by any enterprise to make their security more powerful and to secure the AngularJS applications.
    • Easy integration-Responsive Web App Development Using AngularJS enables collaboration. Web developers working with object-oriented MVC for server-side and other know models can learn and use AngularJS easily. Dependency injection has made is possible for the developers to integrate the modules already developed with AngularJS. There are many libraries present and supplements AngularJS to develop new functionality within the projects.

    Using Bootstrap with AngularJs:

    Angular’s strong model-driven design using a Model View Controller (MVC) approach allows developers who are new to Angular to quickly pick it up and be productive. There is a bit of a learning curve, particularly on understanding Angular’s directives, but the overall reduction of the code required for two-way server binding is much less than what we were used to with jQuery.

    Example 1: AngularJs

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <style>
    body {
      background-color: lightgreen;
    }
      
    @media only screen and (max-width: 600px) {
      body {
        background-color: lightblue;
      }
    }
    </style>
    <div ng-app>
      <div ng-controller="ClickToEditCtrl">
        <div ng-hide="editorEnabled">
          {{title}}
          <a href="#" 
             ng-click="editorEnabled=!editorEnabled">
                Edit title</a>
        </div>
        <div ng-show="editorEnabled">
          <input ng-model="title">
          <a href="#" 
             ng-click="editorEnabled=!editorEnabled">
                        Done editing?</a>
        </div>
      </div>
    </div>
    </body>
    </html>

    chevron_right

    
    

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function ClickToEditCtrl($scope) {
      $scope.title = "Welcome to GFG!";
    }

    chevron_right

    
    

    Output:

    Example 2:

    Responsive Image:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <style>
    body {
      background-color: green;
    }
      
    @media only screen and (max-width: 700px) {
      body {
        background-color: lightgreen;
      }
    }
    </style>
    </head>
    <body>
      
    <p>Welcome To GeeksforGeeks!!!</p>
      <p>Size less than 700px is lightgreen</p>
      <p>Size greater than 700px is green</p>
    </body>
    </html>

    chevron_right

    
    

    Output:




  • My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.