remo 与 me
La unidad relativa de rem depende del tamaño de fuente html. Y em también es una unidad relativa, dependiendo del tamaño de fuente del elemento principal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
.box {
width: 10rem;
height: 10rem;
margin: auto;
background-color: purple;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
Consultas de los medios
媒体查询（Media Query）是CSS3新语法。
Función: establecer diferentes estilos para diferentes pantallas
Especificación de sintaxis de consulta de medios
- Preste atención al símbolo @ al principio de @media
- mediatype: tipo de medio
- Palabras clave y no solo
- la función multimedia debe tener paréntesis
gramática
@media mediatype and|not|only (media feature) {
CSS-Code;
}
tipo de medio
La división de diferentes dispositivos terminales en diferentes tipos se denomina tipos de medios.
Palabra clave
Las palabras clave conectan los tipos de medios y las características de los medios como condiciones para las consultas de medios
- y: Se pueden conectar varias características de medios entre sí, lo que equivale a "y".
- not: excluye un determinado tipo de medio, que significa "no" y se puede omitir.
- solo: especifique un tipo de medio específico, que se puede omitir.
Características de los medios
每种媒体类型具有不同的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body区域在600以下背景为yellow*/
@media screen and (max-width: 600px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
</body>
</html>
Casos de consultas de los medios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 小于540px 背景颜色为蓝色 */
@media screen and (max-width:539px) {
body {
background-color: blue;
}
}
/* 大于540px且小于等于969px的时候，背景颜色为绿色*/
@media screen and (min-width:540px) {
body {
background-color: green;
}
}
/* 大于970px背景颜色为红色*/
@media screen and (min-width:970px) {
body {
background-color: red;
}
}
</style>
</head>
<body>
</body>
</html>
Media query + rem para lograr cambios dinámicos de elementos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 最小屏幕尺寸为320px时 html的字体为50px */
@media screen and (min-width:320px) {
html {
font-size: 50px;
}
}
/* 最小屏幕尺寸为640px时 html的字体为100px */
@media screen and (min-width:640px) {
html {
font-size: 100px;
}
}
.header {
color: red;
font: bold normal 0.5rem normal;
text-align: center;
line-height: 1rem;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div class="header">header</div>
</body>
</html>
Presentación de recursos para consultas de medios
Escriba varios estilos en diferentes tamaños de pantalla y llame a diferentes estilos para diferentes tamaños de pantalla
style320
div {
width: 100%;
height: 50px;
}
div:nth-of-type(1) {
background-color: red;
}
div:nth-of-type(2) {
background-color: blue;
}
style640
div {
float: left;
width: 50%;
height: 25px;
}
div:nth-of-type(1) {
background-color: red;
}
div:nth-of-type(2) {
background-color: purple;
}
índice
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引入资源</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<!-- min-width:320px -->
<link rel="stylesheet" href="./style320.css" media="screen and (min-width:320px)">
<!-- min-width:640px -->
<link rel="stylesheet" href="./style640.css" media="screen and (min-width:640px)">
</head>
<body>
<div></div>
<div></div>
</body>
</html>
Resumen de consulta de medios
- Las consultas de medios se escriben en orden ascendente
- La consulta de medios se compone de palabras clave de tipo de medio, características de los medios
- Agregue paréntesis para las funciones multimedia
Desventajas de CSS
- Escriba mucho código no lógico, la redundancia de CSS es relativamente alta.
- Es más difícil de lidiar con
- Sin capacidad para calcular
menos
Less es el lenguaje de preprocesamiento de CSS. Amplía las características dinámicas de CSS. Amplía algunas funciones sobre la base de la sintaxis de CSS. Introduce funciones variables para que CSS tenga poder de cálculo.
Cómo instalar menos
① Instale nodejs, seleccione la versión (14.7.0), sitio web: nodejs.cn/download/
②Compruebe si la instalación es exitosa, use el comando cmd (win10 es ventana + r, abra y ejecute cmd) -enter "nodo -v" para ver la versión
③Instalación en línea de Less basada en nodejs, solo use el comando cmd "npm install -g less"
④Compruebe si la instalación es exitosa, use el comando cmd "lessc -v" para verificar la versión
Nota: Si vscode quiere compilar menos, debe usar el complemento Easy LESS. Simplemente guarde el archivo Less y el archivo CSS se generará automáticamente.
Nota: Si vscode quiere compilar menos, debe usar el complemento Easy LESS. Simplemente guarde el archivo Less y el archivo CSS se generará automáticamente.
menos variables
@ Nombre de la variable: valor;
Precauciones
- Debe tener el prefijo @
- No puede contener caracteres especiales.
- No se puede empezar con un número
- Distingue mayúsculas y minúsculas
menos archivo
@color:purple;
@font:20px;
@baseline:50px;
html {
font-size: @baseline;
}
.box {
color: @color;
font-size: @font;
background-color: red;
text-align: center;
height: 1rem;
line-height: 1rem;
}
Archivo css compilado
html {
font-size: 50px;
}
.box {
color: purple;
font-size: 20px;
background-color: red;
text-align: center;
height: 1rem;
line-height: 1rem;
}
archivo html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./less.css">
</head>
<body>
<div class="box">
hello word
</div>
</body>
</html>
menos anidación
- El estilo del elemento hijo se puede escribir directamente en el elemento padre
- Si hay un selector de pseudo-clase de enlace, un selector de intersección, un selector de pseudo-elemento, use & para conectar
menos archivo
// 后代选择器
.box {
width: 400px;
height: 400px;
margin: 20px auto;
background-color: red;
p {
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
}
// 伪类选择器
a {
display: block;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: yellow;
text-decoration: none;
&:hover {
background-color: red;
}
}
Archivo css compilado
.box {
width: 400px;
height: 400px;
margin: 20px auto;
background-color: red;
}
.box p {
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
a {
display: block;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: yellow;
text-decoration: none;
}
a:hover {
background-color: red;
}
archivo html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./less嵌套.css">
</head>
<body>
<div class="box">
<p></p>
</div>
<a href="#">百度</a>
</body>
</html>
menos operación
- Cómo escribir el signo de multiplicación (*) y el signo de división (/)
- Hay un espacio en el medio del operador.
- Para la operación entre los valores de dos unidades diferentes, el valor del resultado de la operación toma la unidad del primer valor
- Si solo un valor tiene una unidad entre los dos valores, el resultado de la operación tomará esa unidad
menos archivo
@baseline:50px;
@border:5px + 1;
html {
font-size: @baseline;
}
.box {
width: 80rem/@baseline;
height:80rem/@baseline;
border:@border solid red
}
archivo css
html {
font-size: 50px;
}
.box {
width: 1.6rem;
height: 1.6rem;
border: 6px solid red;
}
archivo html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./operation.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
Soluciones tecnicas
1.less + rem + media query
2.flexible.js + rem
Objetivo de adaptación
Deje algunos elementos que no se pueden adaptar proporcionalmente al dispositivo actual cuando cambia el tamaño del dispositivo.
Tamaño común del anteproyecto de diseño
esquema de adaptación rem
①Suponiendo que el borrador del diseño es de 750px
② Suponga que dividimos toda la pantalla en 15 partes iguales (los estándares de división pueden ser 20 o 10 partes iguales)
③Cada copia se usa como el tamaño de fuente html, aquí es 50px
④Entonces, cuando el dispositivo mide 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 diferentes tamaños de fuente html encontrará que sus proporciones siguen siendo las mismas
⑥ Por ejemplo, utilizamos 750 como borrador de diseño estándar. ⑦ Un elemento de página con 100_100 píxeles debajo de la pantalla 750 se convierte 100/50 en rem, que es 2rem_2rem, y la proporción es 1: 1
⑧ En la pantalla 320, el tamaño de fuente html es 21,33, luego 2rem = 42,66 px. En este momento, el ancho y el alto son 42,66, pero la relación entre ancho y alto sigue siendo 1: 1
⑨Pero ha podido lograr el efecto de escalado proporcional de los cuadros de elementos de la página en diferentes pantallas
para resumir
Valor remoto del elemento de la página = valor del elemento de la página (px) / tamaño de fuente html tamaño de fuente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (min-width:320px) {
html {
font-size: 21.33px;
}
}
@media screen and (min-width:750px) {
html {
font-size: 50px;
}
}
div {
width: 2rem;
height: 2rem;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
