Algunos problemas:
- ¿Puede cambiar el texto del diseño de la página a medida que cambia el tamaño de la pantalla?
- El diseño de flujo y el diseño flexible son principalmente para el diseño de ancho, entonces, ¿cómo configurar la altura?
- Cómo hacer que la altura y el ancho del elemento se escalen proporcionalmente cuando cambia la pantalla
1 rem base
rem(root em) es una unidad, similar a em. la diferencia:
emes relativo al tamaño de fuente del elemento padreremLa base es relativa al tamaño de fuente del elemento html- Por ejemplo, si el elemento raíz (html) establece font-size=12px; si el elemento no raíz establece width:2rem; entonces reemplácelo con px para indicar 24px
La ventaja de rem: el tamaño del texto del elemento principal puede ser inconsistente, pero la página completa tiene solo un html, que puede controlar bien el tamaño del elemento de toda la página
<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>
html {
font-size: 12px;
}
div {
font-size: 10px;
width: 15rem;
height: 15rem;
background-color: purple;
}
p {
/* 1. em相对于父元素 的字体大小来说的 */
width: 10em;
height: 10em;
/* 2. rem 相对于 html元素 字体大小来说的 */
/* width: 10rem;
height: 10rem; */
background-color: pink;
/* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
2 consultas de medios
2.1 Definición
Consulta de medios (Media Query) es una nueva sintaxis de CSS3
- Usando
@mediaconsultas, se pueden definir diferentes estilos para diferentes tipos de medios @mediaSe pueden configurar diferentes estilos para diferentes tamaños de pantalla- Cuando restablece el tamaño del navegador, la página también volverá a mostrar la página de acuerdo con el ancho y la altura del navegador.
- En la actualidad, las consultas de medios se utilizan para muchos teléfonos móviles Apple, teléfonos móviles Android, tabletas y otros dispositivos.
2.2 Especificación gramatical
@media mediatype and|not|only (media feature) {
CSS3-Code;
}@mediacomienza con- mediatype es el tipo de medio
- palabras clave
and,not,only media featurePropiedades de medios, deben tener paréntesis
<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>
/* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
/* max-width 小于等于800 */
/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
@media screen and (max-width: 500px) {
body {
background-color: purple;
}
}
</style>
</head>
El código anterior significa que la página en nuestra pantalla tiene entre 500 px y 800 px, y el color de fondo de la página se muestra como rosa. La página es más pequeña que 500 px y el color de fondo se muestra como púrpura
2.3 tipo de consulta tipo de medio
Dividir diferentes dispositivos terminales en diferentes tipos, llamados tipos de medios
| valor | explicar |
|---|---|
all |
para todos los dispositivos |
print |
Para impresoras y navegadores de impresión |
screen |
Para pantallas de ordenador, tabletas, smartphones, etc. |
2.4 Palabras clave and not only
Las palabras clave concatenan atributos de tipo de medios como condiciones para las consultas de medios
and: puede conectar varios tipos o varios tipos de medios para convertirse en la condición de una consulta de mediosnot: Excluir un determinado tipo de medio, que es equivalente a "no" y se puede omitironly: especifique un tipo de medio específico, que se puede omitir
2.5 Funciones multimedia
Cada tipo de medio tiene sus propias características específicas y se establecen diferentes estilos de visualización de acuerdo con las características de los diferentes tipos de medios. Conozcamos tres por el momento, y tenga en cuenta que deben incluirse entre paréntesis.
| valor | explicar |
|---|---|
width |
Define el ancho del área visible de la página en el dispositivo de salida |
min-width |
Define el ancho mínimo del área visible de la página en el dispositivo de salida |
max-width |
Define el ancho máximo del área visible de la página en el dispositivo de salida |
El valor de las consultas de medios: las consultas de medios pueden cambiar diferentes estilos según los diferentes tamaños de pantalla
<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>
/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 2. 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
} */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* 4. 大于等于970 我们页面的颜色改为 红色 */
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
/* 5. screen 还有 and 必须带上不能省略的 */
/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */
</style>
</head>
2.6 Media query + rem para realizar cambios dinámicos en el tamaño de los elementos
remLas unidades vanhtmly vienen, conremlos elementos de la página puedes configurar diferentes tamaños- Las consultas de medios pueden modificar estilos de acuerdo con diferentes anchos de dispositivo
- Media query + rem puede realizar diferentes anchos de dispositivo y realizar cambios dinámicos en el tamaño de los elementos de la página
<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;
}
/* html {
font-size: 100px;
} */
/* 从小到大的顺序 */
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
El código anterior significa: el tamaño de la pantalla es inferior a 320 px, el tamaño de la div es 0,5*50 = 25 px, el tamaño de la pantalla es superior a 320 px y inferior a 640 px, el tamaño de la div es 0,5 * 100 = 50 px
2.7 Importación de recursos
- Cuando hay muchos estilos, podemos usar diferentes stylesheets (hojas de estilo) para diferentes medios
- El principio es juzgar directamente el tamaño del dispositivo en el enlace y luego referirse a diferentes archivos css
/* 当屏幕大于 640px，一行显示两个 */
/* 小于 640px 的，一行显示一个 */
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
Importar recursos es llamar a diferentes archivos css para diferentes tamaños de pantalla
3 MenosBásicos
CSS es un lenguaje no procedimental, sin variables, funciones, SCOPE (alcance) y otros conceptos.
- CSS necesita escribir mucho código aparentemente ilógico, la redundancia de CSS es relativamente alta
- Mantenimiento y expansión inconvenientes, no conducentes a la reutilización.
- CSS no tiene un buen poder de cómputo
- Para los ingenieros de desarrollo que no son de front-end, a menudo es difícil escribir proyectos de código CSS bien organizados y fáciles de mantener debido a la falta de experiencia en escritura de CSS.
3.1 Introducción a menos
- Less (abreviatura de Leaner Style Sheets) es un lenguaje de extensión CSS, también conocido como preprocesador CSS
- Como una forma de extensión de CSS, no reduce las funciones de CSS, sino que agrega funciones de lenguaje procesal a CSS basadas en la sintaxis de CSS existente.
- Basado en la sintaxis de CSS, introduce funciones como variables, Mixin (mezclado), operaciones y funciones, lo que simplifica enormemente la escritura de CSS y reduce el costo de mantenimiento de CSS.
Menos URL en chino: http://lesscss.cn
Preprocesadores CSS comunes: Sass, Less, Stylus
Essence: Less es un lenguaje de preprocesamiento de CSS que amplía las características dinámicas de CSS.
3.2 uso de menos
Primero creamos un nuevo archivo con el sufijo less y escribimos la instrucción less en este archivo less. Aprendizaje en esta etapa:
- Menos variable
- Menos compilar
- Menos anidamiento
- Menos operación
menos variable
Variable significa que no hay un valor fijo, a menudo se usan algunos colores y valores en CSS
@变量名:值;ejemplo
// 定义一个粉色变量
@color: pink;
@font14: 14px;
body {
background-color: @color;
}
div {
background-color: @color;
font-size: @font14;
}Convención de nomenclatura de variables:
- debe tener
@prefijo - no puede contener caracteres especiales
- No puede comenzar con un número (elimine la
@parte del prefijo) - Distingue mayúsculas y minúsculas
compilar menos
Esencialmente, Less incluye un conjunto de gramáticas personalizadas y un analizador. Los usuarios definen sus propias reglas de estilo basadas en estas gramáticas. Estas reglas eventualmente serán compiladas y generadas por el analizador para generar los archivos CSS correspondientes.
Por lo tanto, necesitamos compilar nuestro archivo less en un archivo css para que se pueda usar nuestra página html
En VS Code, use el complemento Easy Less para compilar y generar archivos CSS en tiempo real y luego importarlos
menos anidamiento
Similar a la anidación entre elementos html, los selectores también se pueden anidar en Less
#header {
.logo {
width: 100px;
}
}Para escribir pseudoclases, selectores de intersección y selectores de pseudoelementos en less, agregue & delante del selector interno
- Si no hay un selector interno precedente
&, se analiza como un descendiente del selector principal; - Si está presente
&, se resuelve en el propio elemento principal o en una pseudoclase del elemento principal.
a:hover {
color: red;
}Escritura menos anidada:
a {
&:hover {
color: red;
}
}menos operación
Cualquier número, color o variable puede participar en la operación, y Less proporciona operaciones aritméticas de suma ( +), resta ( -), multiplicación ( *) y división ( )./
@width: 10px + 5;
div {
border: @width solid red;
}
/* 生成的css */
div {
border: 15px solid red;
}
/* Less甚至还可以这样 */
width: (@width + 5) * 2;
- Para operaciones de división, se requieren paréntesis
- Debe haber espacios en los lados izquierdo y derecho del operador
- Si solo uno de los operandos tiene una unidad, el resultado final estará en esta unidad
- Si hay varias unidades, la primera unidad prevalecerá
Esquema de adaptación de 4 rem
- Deje que algunos elementos que no pueden adaptarse proporcionalmente se adapten al dispositivo actual proporcionalmente cuando cambie el tamaño del dispositivo
- Use consultas de medios para establecer el tamaño de fuente de html proporcionalmente de acuerdo con diferentes dispositivos, y luego use rem como unidad de tamaño para los elementos de la página. Cuando el tamaño de fuente de html cambia, el tamaño del elemento también cambiará, para lograr la adaptación de escalado proporcional
Esquema de adaptación al desarrollo real
- De acuerdo con la relación entre el borrador del diseño y el ancho del dispositivo, calcule y establezca dinámicamente el tamaño de fuente de la etiqueta raíz html; (consulta de medios)
- En CSS, el ancho, la altura, la posición relativa y otros valores de los elementos del borrador de diseño se convierten en valores en unidades rem de acuerdo con la misma proporción
Solución técnica 1
Tamaños comunes de dispositivos:
| equipo | ancho común |
|---|---|
| iphone45 | 640px |
| iphone678 | 750px |
| Androide | Común 320px, 360px, 375px, 384px, 400px, 720px. 720px para la mayoría de los dispositivos Android de 4,7~5 pulgadas |
Establecer dinámicamente el tamaño de fuente de las etiquetas html
- Supongamos que el borrador del diseño es de 750 px.
- Supongamos que dividimos toda la pantalla en 15 partes iguales (diferentes estándares de división pueden ser 20 o 10 partes iguales)
- Cada copia se usa como el tamaño de fuente html, aquí hay 50px
- Luego, en un dispositivo de 320 px, el tamaño de fuente es 320/15, que es 21,33 px
- Dividir el tamaño de los elementos de nuestra página por los diferentes tamaños de fuente html revelará que sus proporciones siguen siendo las mismas
- Por ejemplo, usamos 750 como borrador de diseño estándar
- Un elemento de página de 100*100 píxeles es 100/50 en la pantalla 750, convertido a rem es 2rem * 2 rem, la relación es 1 a 1
- Bajo la pantalla 320, el tamaño de fuente html es 21.33, luego 2rem = 42.66px, el ancho y alto son ambos 42.66 en este momento, pero la proporción de ancho a alto sigue siendo 1:1
- Sin embargo, ha podido lograr el efecto de escalado proporcional de los cuadros de elementos de página en diferentes pantallas.
Método de valor de tamaño de elemento
- Primero elija un conjunto de tamaños estándar, como 750
- Divide el tamaño de la pantalla por el número de divisiones para obtener el tamaño del texto en html. En este punto sabemos que los tamaños de texto obtenidos bajo diferentes pantallas son diferentes.
- El valor rem del elemento de la página = el valor px del elemento de la página a 750 píxeles / el tamaño del texto en html