[HTML+CSS] Diseño receptivo para el desarrollo WEB móvil

Mobile 2023-08-02 22:34:13 views: null

1 Desarrollo receptivo

Principios del desarrollo receptivo

Es usar consultas de medios para establecer el diseño y el estilo para dispositivos de diferentes anchos, para adaptarse al propósito de diferentes dispositivos.

división de equipos Rango de tamaño
Pantalla ultrapequeña (teléfono móvil) w < 768px
Dispositivos de pantalla pequeña (tabletas) 768px <= w < 992px
Pantalla mediana (monitor de escritorio) 992px <= w < 1200px
Dispositivos de pantalla ancha (grandes monitores de escritorio) w >= 1200px

Contenedores de desarrollo responsivo 

Responsivo  requiere un padre como contenedor de diseño para cooperar con elementos secundarios para lograr efectos de cambio

El principio es cambiar el tamaño del contenedor de diseño a través de consultas de medios en diferentes pantallas, y luego cambiar la disposición y el tamaño de los subelementos en el interior, para realizar diferentes cambios de estilo y diseño de página en diferentes pantallas.

Por lo general, nuestra división de tamaño de respuesta (pero también podemos definir nuestra propia división de acuerdo con la situación real):

  • Pantalla muy pequeña (teléfono móvil, menos de 768 px): establezca el ancho en 100%
  • Pantalla pequeña (tableta, mayor o igual a 768 px): establezca el ancho en 750px
  • Pantallas medianas (monitores de escritorio, mayores o iguales a 992 px): el ancho se establece en 970px
  • Pantallas grandes (monitores de escritorio grandes, mayores o iguales a 1200 px): el ancho se establece en 1170px

parte HTML:

<!-- 布局容器 -->
<div class="container"></div>

Parte CSS:

.container {
    height: 150px;
    margin: 0 auto;
    background-color: pink;
}
/* 超小屏幕 小于 768 布局容器宽度为 100% */
@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
}
/* 小屏幕 大于等于 768，布局容器 750px */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}
/* 中等屏幕 */
@media screen and (min-width: 992px) {
    .container {
        min-width: 970px;
    }
}
/* // 大屏幕 */
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

Caso: Navegación receptiva 

  • Cuando nuestra pantalla es mayor o igual a 800 píxeles, damos  nav un ancho de 800 px, porque el subcuadro interior necesita flotar, por lo que  nav debemos borrar el flotador.
  • nav Contiene 8  li cuadros pequeños, cada uno con un ancho de 100 px y una altura de 30 px, que se muestran en una fila flotante
  • Cuando nuestra pantalla hace zoom y el ancho es inferior a 800 píxeles, nav el ancho del cuadro se modifica al 100% de ancho
  • nav Para los 8 pequeños en el interior  li, el ancho se cambia a 33,33%, de modo que solo se pueden mostrar 3 pequeños en una línea  li , y se mostrarán el resto de las líneas inferiores.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .container {
            width: 750px;
            margin: 0 auto;
        }
        
        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }
        
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
            .container ul li {
                width: 33.33%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>

</html>

2 Marco de desarrollo front-end Bootstrap 

Bootstrap proviene de Twitter (Twitter) y actualmente es el marco front-end más popular. Bootstrap está basado en HTML, CSS y JAVASCRIPT, es conciso y flexible, agilizando el desarrollo web

Marco: como su nombre lo indica, es un conjunto de arquitectura, que tiene un conjunto relativamente completo de soluciones de funciones de páginas web, y el control está en el propio marco, con bibliotecas de estilos, componentes y complementos prefabricados. Los usuarios deben desarrollar de acuerdo con ciertas especificaciones estipuladas por el marco

Ventajas de Bootstrap:

  • Especificación de codificación html+css estandarizada
  • Proporciona un conjunto de componentes simples, intuitivos y potentes.
  • Tiene su propio ecosistema, constantemente actualizado e iterado.
  • Facilite el desarrollo y mejore la eficiencia del desarrollo

Bootstrap utiliza cuatro pasos:

  • Crear estructura de carpetas
  • Crear estructura de esqueleto html
  • Importar archivos de estilo relacionados
  • escribir contenido

  • Crear estructura de carpetas
bootstrap
  -css
  -fonts
  -js
css
images
index.html
  • Estructura de esqueleto HTML
<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!--[if lt IE 9]>
<!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
  • Importar archivos de estilo relacionados
<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  • escribir contenido
    • Use los estilos predefinidos de Bootstrap directamente
    • Modifica el estilo original de Bootstrap, presta atención al problema del peso.
    • La clave para aprender bien Bootstrap es saber qué estilos define y qué efectos pueden lograr estos estilos.

contenedor de diseño

Bootstrap necesita envolver un  .container contenedor para el contenido de la página y el sistema de cuadrícula, y proporciona dos clases para este propósito.

  1. container amable
    • Ancho fijo del contenedor para un diseño receptivo
    • El ancho de la pantalla grande (>=1200 px) se establece en 1170 px
    • El ancho de la pantalla central (>=992px) se establece en 970px
    • Para pantallas pequeñas (>=768px), el ancho se establece en 750px
    • Pantalla ultra pequeña (100%)
  2. container-fluid amable
    • Contenedor de diseño fluido 100% de ancho
    • Un contenedor que ocupa toda la ventana gráfica.

3 Sistema de cuadrícula Bootstrap 

introducir:

El sistema de cuadrícula es "sistemas de cuadrícula" en inglés, y algunas personas lo traducen como "sistema de cuadrícula". Se refiere a dividir el diseño de la página en columnas de igual ancho y luego modularizar el diseño de la página definiendo el número de columnas.

Bootstrap proporciona un sistema de cuadrícula fluida receptivo y móvil que se divide automáticamente en hasta 12 columnas a medida que aumenta el tamaño de la pantalla o la ventana gráfica

Parámetros de selección de cuadrícula

El sistema de cuadrícula se usa para crear diseños de página a través de una serie de combinaciones de filas y columnas, y su contenido se puede colocar en estos diseños creados.

  • Dividido en 1~12 partes iguales según diferentes pantallas
  • Fila (fila) puede eliminar el margen de 15px del contenedor principal
  • xs-extrapequeño: extrapequeño; sm-pequeño: pequeño; md-mediano: mediano; lg-grande: grande
  • La columna (columna) es mayor a 12, y los elementos donde se ubica la "columna" redundante se ordenarán en una nueva línea en conjunto
  • Cada columna tiene por defecto unos 15 píxeles. padding
  • Puede especificar los nombres de clase de varios dispositivos para una columna al mismo tiempo, para dividir diferentes copias.Por ejemplo class="col-md-4 col-sm-6"

Por ejemplo, col-lg-3 col-md-4 col-sm-6 col-xm-12 significa que a medida que se reduce el tamaño de la pantalla, las casillas que se pueden colocar en cada fila se convierten en 4, 3, 2, 1

<!-- 有12个，则可以占满一行 -->
<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">2</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">3</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">4</div>
</div>
<!-- 有12个，则可以占满一行，不同份数表示了所占比例 -->
<div class="row">
    <div class="col-lg-1">1</div>
    <div class="col-lg-2">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-6">4</div>
</div>
<!-- 不足12个，则空出多余 -->
<div class="row">
    <div class="col-lg-3">1</div>
    <div class="col-lg-3">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-2">4</div>
</div>
<!-- 超出12个，则放到下一行 -->
<div class="row">
    <div class="col-lg-3">1</div>
    <div class="col-lg-3">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-4">4</div>
</div>

anidamiento de columnas

Sistema de cuadrícula El sistema de cuadrícula integrado vuelve a anidar el contenido. Un entendimiento simple es que una columna se divide en varias columnas pequeñas. Podemos hacer esto agregando un nuevo  .row elemento y una serie  de elementos a los  elementos .col-sm-* existentes .col-sm-*

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-6">第一小列</div>
                <div class="col-md-6">第二小列</div>
            </div>
        </div>
        <div class="col-md-4">第二列</div>
        <div class="col-md-4">第三列</div>
    </div>
</div>

El efecto de diseño es el siguiente: 

desplazamiento de columna

Use  .col-md-offset-* clases para desplazar columnas a la derecha. * Estas clases en realidad aumentan el margen izquierdo (margen) para el elemento actual mediante el uso  de selectores

<div class="container">
    <div class="row">
        <div class="col-md-4">1</div>
        <div class="col-md-4 col-md-offset-4">2</div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">0</div>
    </div>
</div>

El efecto de diseño es el siguiente: 

ordenación de columnas

El orden de  las columnas se puede cambiar fácilmente usando  .col-md-push-* la clase y .col-md-pull-*column

<div class="container">
    <div class="row">
        <div class="col-md-4">左侧盒子</div>
        <div class="col-md-8">右侧盒子</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-push-8">左侧盒子</div>
        <div class="col-md-8 col-md-pull-4">右侧盒子</div>
    </div>
</div>

herramientas receptivas

Para acelerar el desarrollo de páginas optimizadas para dispositivos móviles, use la función de consulta de medios y use estas herramientas para mostrar u ocultar fácilmente el contenido de la página para diferentes dispositivos. Además de la  .hidden-xm clase de herramienta oculta receptiva, también hay  .visible-xm una clase de herramienta de visualización receptiva, que se muestra cuando la pantalla está en una pantalla ultrapequeña (teléfono móvil)

Supongo que te gusta

Origin blog.csdn.net/m0_55644132/article/details/127586475
Recomendado
Clasificación
Diario
Más
2024-05-19(0)
2024-05-18(30)
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)

Code World

© 2018 codetd.com