AngularJS中的响应式页面

网页开发设计的重点是动态改变网站的外观，这取决于我们查看的设备的屏幕尺寸和方向。这个满足用户需求的整个过程被称为响应式网页设计（RWD）。因此，基本上，当用户从任何设备上访问网站时，他们应该能够获得最好的体验。如今，用户能够使用手机、平板电脑、个人电脑和笔记本电脑等设备访问网站。因此，他们获得的便利应该是我们的优先事项。所以，为了实现这一点，我们使用RWD。响应式设计只使用HTML和CSS。

视口:

视口指的是用户的可视区域。它根据设备的不同而不同。与电脑相比，移动电话的视口更小。

语法:

<!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>

这将有助于以1×1的长宽比查看网页，这将消除智能手机浏览器的默认功能，并呈现网站的全视图，这将允许用户增加或减少屏幕的大小。

在HTML5中，meta被引入，它帮助浏览器控制缩放比例和尺寸。

width=device-width-处理网页的宽度。

initial-scale=1.0部分设置初始缩放级别（当页面第一次在浏览器中加载时）。

Grid-View:

将页面划分为主要由12个网格组成的列，这些网格约为屏幕总宽度的100%。

语法:

* {
 box-sizing: border-box;
}

AngularJS中的响应式页面

.A{
width: 20%;
float: left;
}
.B{
 width: 80%;
float: left;
}

具有向上和向下缩放功能的响应式图像：-

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

max-width property:

图像会缩小，但不会放大到比原来的尺寸更大。

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

语法:

.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;} }

它是如何做到的？

浏览器代理字符串
使用CSS媒体查询。

Service:

确定设备类型并使用适当的准绳。
ng-if和ng-switch来显示所需内容。

Custom Directives:

不需要使用ng-if和ng-switch来显示所需的内容。更多的语义方法。

HTML标记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

断点和媒体查询：

当网站的内容根据设备的宽度进行响应，从而使用户获得最佳的布局时，称为断点或媒体查询断点，因为它们是与媒体查询一起使用的。有两种方法来应用断点。

媒体查询是在CSS3中作为一种CSS技术引入的。

基于设备。

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) {
...
}

示例:

<!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>

AngularJS中的响应式页面

根据内容。

@media only screen (min-width: 768px){
...
 }
**"or"**
@media only screen and (min-width: 768px) and (max-width: 959px){
 ...
 }

Breakpoint	媒体查询（像素范围）
xs	`(max-width: 599px)`
gt-xs	`(min-width: 600px)`
sm	`（最小宽度：600px）和（最大宽度：959px）`
gt-sm	`(min-width: 960px)’
md	`（最小宽度：960px）和（最大宽度：1279px）`
gt-md	`(最小宽度: 1280px)’
lg	`（最小宽度：1280px）和（最大宽度：1919px）`
gt-lg	`(min-width: 1920px)`
xl	`(min-width: 1920px)`

使用AngularJs进行响应式设计的优势：

以更少的精力更快地创建Web应用程序-AngularJs使用HTML代码。不需要编写冗长的MVC流水线。更少的代码行。
安全和响应性的网页设计-安全的HTTP调用是为了与服务器建立通信。RESTful APIs和Web服务有助于这种通信。任何企业都要采取适当的和理想的安全专业，使他们的安全更强大，并确保AngularJS应用程序的安全。
易于整合–使用AngularJS的响应式Web应用开发实现了协作。使用面向对象的MVC的服务器端和其他已知模型的Web开发人员可以轻松学习和使用AngularJS。依赖性注入使开发人员有可能将已经开发的模块与AngularJS集成。有许多库存在并补充AngularJS，以便在项目中开发新功能。

使用Bootstrap与AngularJs：

Angular强大的模型驱动设计采用了模型-视图-控制器（MVC）的方法，这使得刚接触Angular的开发者能够迅速掌握它并取得成效。有一点学习曲线，特别是在理解Angular的指令方面，但总体上减少了双向服务器绑定所需的代码，比我们习惯的jQuery要少得多。

例子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!";
}

输出:
AngularJS中的响应式页面

AngularJS中的响应式页面

示例 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>

输出:

AngularJS中的响应式页面