Responsive page in AngularJS - GeeksforGeeks

26 Aug, 2020
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:
<!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>
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 APIlayout(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-filllayout-wraplayout-nowraplayout-marginlayout-paddingshowhideBreakpoints 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.
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-align
(start | center | end | space-around | space-between start | center | end | stretch)
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:<!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>
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:
<!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>
Based on the content.@media only screen (min-width: 768px){
...
 }
"or"
@media only screen and (min-width: 768px) and (max-width: 959px){
 ...
 }BreakpointMediaQuery (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<!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>function ClickToEditCtrl($scope) {  $scope.title = "Welcome to GFG!";}Output:Example 2:Responsive Image:<!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>Output:My Personal Notes
arrow_drop_upSave
@media only screen (min-width: 768px){
...
 }
"or"
@media only screen and (min-width: 768px) and (max-width: 959px){
 ...
 }
MediaQuery (pixel range)
xs
‘(max-width: 599px)’
gt-xs
‘(min-width: 600px)’
gt-sm
‘(min-width: 960px)’
md
gt-md
‘(min-width: 1920px)’
‘(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
<!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>
function ClickToEditCtrl($scope) {  $scope.title = "Welcome to GFG!";}
Output:
Example 2:
Responsive Image:
<!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>
Output:
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
Introduction to AngularJS
AngularJS | ng-src Directive
ng-content in Angular
How to force redirect to a particular route in angular?
Express.js express.Router() Function
How to set input type date in dd-mm-yyyy format using HTML ?
Installation of Node.js on Linux
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?