Página receptiva en AngularJS

Posted on by Rudeus Greyrat

El diseño de desarrollo web que se enfoca en los cambios dinámicos en la apariencia de un sitio web, que depende del tamaño de la pantalla y la orientación del dispositivo en el que lo estamos viendo. Todo este proceso para cumplir con los fines del usuario se denomina diseño web Responsive (RWD). Entonces, básicamente, la experiencia del usuario cuando accede al sitio web desde cualquier dispositivo debería poder obtener la mejor experiencia. Hoy en día, el usuario puede acceder a los sitios web a través de dispositivos como teléfonos móviles, tabletas, PC y portátiles. Por lo tanto, la conveniencia obtenida por ellos debe ser nuestra prioridad. Entonces, para lograr esto, usamos RWD. Los diseños receptivos usan solo HTML y CSS.

Ver puerto:

View Port se refiere al área visible de los usuarios. Varía según el dispositivo. Los teléfonos móviles tendrán unos más pequeños en comparación con las computadoras.

Sintaxis:

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

Esto ayudará a ver la página web en una relación de aspecto de 1 × 1, lo que eliminará la funcionalidad predeterminada de los navegadores de los teléfonos inteligentes y mostrará los sitios web a vista completa, lo que permitirá a los usuarios aumentar o disminuir el tamaño de la pantalla. 
 

En HTML5 se introdujo meta. Ayudó al navegador a controlar las escalas y las dimensiones.

width=device-width-Maneja el ancho de la página web.

initial-scale=1.0 parte establece el nivel de zoom inicial (cuando la página se carga por primera vez en el navegador).

Vista en cuadrícula:

Dividir la página en columnas de principalmente 12 cuadrículas que son aproximadamente el 100% del ancho total de la pantalla.

Sintaxis:

* {
 box-sizing: border-box;
} 

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

Imagen receptiva con escala hacia arriba y hacia abajo: –

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

propiedad de ancho máximo:

La imagen se reducirá pero no se ampliará para ser más grande que su tamaño original:

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

Sintaxis:

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

Tipografía receptiva:

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

¿Como esta hecho?

  • String de agente de navegador
  • Utilice consultas de medios CSS.

    • Servicio:

    • Determine el tipo de dispositivo y use parciales apropiados.
    • ng-if y ng-switch para mostrar el contenido requerido.

    Directivas personalizadas:

    No es necesario usar ng-if y ng-switch para mostrar el contenido requerido. Enfoque más semántico.

    API de marcado HTML:

    API de marcado HTML
    diseño (fila | columna)
    flex(valores enteros)
    orden flexible (valores enteros)
    flex-offset (valores enteros)

    diseño-alinear

    (inicio | centro | final | espacio alrededor | espacio entre inicio | centro | final | estirar)
    diseño de relleno
    ajuste de diseño
    diseño-ahora
    margen de diseño
    relleno de diseño
    mostrar
    ocultar

    Breakpoints y Mediaqueries:

    Cuando los contenidos del sitio web se responden de acuerdo con el ancho del dispositivo que permite el mejor diseño posible para el usuario se denomina Breakpoints o media query breakpoints , ya que se utilizan con Mediaqueries. Hay 2 formas de aplicar los puntos de interrupción.

    Media Query se introdujo en CSS3 como una técnica CSS.

  • Basado en el dispositivo.

    Paisaje

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

    Retrato de teléfono inteligente

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

    Paisaje de teléfonos inteligentes

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

    iPads (retrato)

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

    Retrato de tableta

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

    Tableta Horizontal/Escritorio

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

    Tableta Horizontal/Escritorio (1200px)

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

    Ejemplo:

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


  • Basado en el contenido. 
    @media only screen (min-width: 768px){
...
 }
"or"
@media only screen and (min-width: 768px) and (max-width: 959px){
 ...
 }
    Punto de ruptura

    MediaQuery (rango de píxeles)

    xs

    ‘(ancho máximo: 599px)’

    gt-xs

    ‘(ancho mínimo: 600px)’
    SM ‘(ancho mínimo: 600px) y (ancho máximo: 959px)’

    gt-sm

    ‘(ancho mínimo: 960px)’

    Maryland

    		 ‘(ancho mínimo: 960px) y (ancho máximo: 1279px)’

    gt-md

    		 ‘(ancho mínimo: 1280px)’
    lg ‘(ancho mínimo: 1280px) y (ancho máximo: 1919px)’
    gt-lg

    ‘(ancho mínimo: 1920px)’
    SG

    ‘(ancho mínimo: 1920px)’

    Ventajas de usar AngularJs para diseño receptivo:

    • Creación de aplicaciones web más rápido con menos esfuerzo: AngularJs utiliza código HTML. No es necesario escribir largas canalizaciones de MVC. Menos líneas de código.
    • Diseños web seguros y receptivos: se realizan llamadas HTTP seguras para establecer comunicación con el servidor. Las API RESTful y los servicios web ayudan en esta comunicación. Cualquier empresa debe tomar una especialización en seguridad adecuada e ideal para hacer que su seguridad sea más poderosa y para proteger las aplicaciones AngularJS.
    • Fácil integración: el desarrollo de aplicaciones web con capacidad de respuesta mediante AngularJS permite la colaboración. Los desarrolladores web que trabajan con MVC orientado a objetos para el lado del servidor y otros modelos conocidos pueden aprender y usar AngularJS fácilmente. La inyección de dependencia ha hecho posible que los desarrolladores integren los módulos ya desarrollados con AngularJS. Hay muchas bibliotecas presentes y complementos de AngularJS para desarrollar nuevas funcionalidades dentro de los proyectos.

    Usando Bootstrap con AngularJs:

    El sólido diseño basado en modelos de Angular que utiliza un enfoque de controlador de vista de modelo (MVC) permite a los desarrolladores que son nuevos en Angular aprenderlo rápidamente y ser productivos. Hay una pequeña curva de aprendizaje, particularmente en la comprensión de las directivas de Angular, pero la reducción general del código requerido para el enlace de servidor bidireccional es mucho menor de lo que estábamos acostumbrados con jQuery.

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

    Producción:

    Ejemplo 2:

    Imagen receptiva:

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

    Producción:

    • Publicación traducida automáticamente

    Artículo escrito por sharmaanushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *