unidades rem
rem (em raíz) es una unidad relativa, similar a la em, em es el tamaño de fuente del elemento padre;
Rem es diferente con respecto al tamaño de la fuente del elemento de referencia html;
Por ejemplo, el elemento raíz (html) dispuesto font-size: 12px; elemento no raíz es ancho establecido: 2rem; caso px representado en términos 24px;
ventaja rem: es decir, el tamaño de página se puede cambiar modificando el elemento html puede controlar en general dentro del tamaño del texto;
consultas de los medios
Las consultas de medios (medios de consulta) es la nueva sintaxis CSS 3;
- Utilice @media consulta, puede definir diferentes estilos para diferentes tipos de medios de comunicación;
- @media puede configurar diferentes estilos para diferentes tamaños de pantalla;
- Cuando se restablece el tamaño del navegador del proceso, la página se volverá a mostrar la página de acuerdo a la anchura y la altura del navegador;
- En la actualidad una gran cantidad para el teléfono de Apple, teléfono Android, tabletas y otros dispositivos se han utilizado para multimedia;
@media mediatype and|not|only (media feature) {
css-code;
}
/*
@media：关键字；
mediatype：媒体类型；
and|not|only：关键字；
media feature：媒体特性 必须有小括号包含
*/MediaType tipo de consulta
Los diferentes dispositivos terminales se dividen en diferentes tipos, se hace referencia como el tipo de medio
| valor | explicación |
|---|---|
| todos | Para todos los dispositivos |
| impresión | Para las impresoras y vista previa de impresión |
| piedra | Para las pantallas de ordenador, tablet PC, teléfonos móviles sólo se |
palabra clave
Palabras clave tipos de medios o más propiedades de medios vinculados a la condición juntos como preguntas de los medios
- y: que pueden ser conectadas entre sí en una pluralidad de propiedades de los medios, y medios equivalentes;
- no: excluyendo una característica medios de comunicación, que corresponde a los no medios puede ser omitido;
- solamente: especificar un tipo de medios características pueden ser omitidos;
propiedades de medios
Cada tipo de material tiene sus propios atributos diferentes, de la serie A. diferentes estilos de visualización de acuerdo con diferentes tipos de medios de propiedades de medios, prestar atención a añadir paréntesis
| valor | explicación |
|---|---|
| anchura | Los dispositivos de salida visible región definida ancho de página |
| min-width | aparato de salida de página definido ancho de la región mínima visible |
| anchura máxima | Definir el área máxima visible de la anchura de la página dispositivo de salida |
Ejemplos
/* 建议从小往大开始写 */
@media screen and (max-width: 539px) {
body {
background-color: pink;
}
}
/* 这里最后一个条件可以去掉，为了演示多个写法故而加上 */
@media screen and (min-width: 540px) and (max-width: 7990px) {
body {
background-color: hotpink;
}
}
@media screen and (min-width: 800px) {
body {
background-color: plum;
}
}La introducción de los recursos
Al comparar gama de estilos, podemos utilizar diferentes hojas de estilo (hojas de estilo) para diferentes medios de comunicación;
Principio: una etiqueta de enlace se determina directamente en el tamaño del dispositivo, a continuación, introducir diferentes archivos CSS, recomendaciones ascendente escrito;
<link rel="stylesheet" href="./width320.css" media="screen and (min-width: 320px)" />
<link rel="stylesheet" href="./width640.css" media="screeb and (min0-width: 640px)" />menos fundación
a la vez Introducción
Menos (Leaner Style Sheets Abreviatura) css es un lenguaje extendida, también conocida como preprocesador css;
Css como una forma de desarrollo, no redujo la función css, pero en la sintaxis existente para añadir CSS procedimental características del lenguaje;
Se CSS sintaxis basada en la introducción de una variable, Mixin (mixto), y funciones de cálculo, etc., simplifica en gran medida la preparación de css, y la reducción de costes de mantenimiento de css;
Menos red china: http: //lesscss.cn/
preprocesador CSS común: Menos, Sass, Stylus
la instalación de menos
- Node.js instalación
- NPM instalar -g menos
- lessc -v echa de menos la versión
menos compilación
.less archivo no puede ser identificado html, se recomienda aquí un tapón vscode fácil Menos, este plugin puede ser menos archivos css compilados en un documento
menos variables
// @变量名: 值;
// 上面引用，下面调用，开头必须是@
@color: pink;
body {
background-color: @color;
}menos de anidación
Estilo de escribir directamente a los elementos secundarios dentro del elemento padre
.nav { .logo { color: pink; } }Pseudo-clase, la intersección del selector, el pseudo-elemento selector, el frente selector interior a y
a { &:hover { content: ""; } }
menos la operación
@border: 5px + 1;
body {
width: 200px - 50;
height: 200px * 0.5;
// 如果前后运算的值都存在单位，那么以第一个为准
border: (@border + 1) / 7 + 1rem;
}esquema de adaptación rem
1, por lo que algunos elementos de la proporcional adaptativo no, cuando el tiempo alcanza el tamaño del aparato se cambia, el dispositivo de adaptación de corriente proporcional
2, el uso de HTML consultas de medios para ajustar el tamaño de la fuente a escala dependiendo del dispositivo y, a continuación, utilizar los elementos de la página hacer unidad rem de medida, cuando el tamaño de la fuente cambia html, cambios de tamaño de los elementos va a seguir, a fin de lograr el efecto de escala geométrico;
El esquema real de la adaptación de desarrollo
1, el dispositivo de acuerdo con la relación de la anchura del proyecto de diseño, dinámicamente calcula y establecer el tamaño de las etiquetas HTML raíz de fuente de tamaño; (consultas de medios)
2, css, el proyecto de elemento de diseño de anchura, altura, y el valor de posición relativa, de acuerdo con el valor igual a las unidades de escalamiento REM;
etiquetas html establecen dinámicamente el tamaño de la fuente de tamaño
1, suponiendo un diseño de proyecto 750px
2, Supongamos que ponemos toda la pantalla está dividida en 15 partes iguales (puede ser 20 también puede ser una 10)
3, ya que cada fuente HTML es 50px aquí
4, entonces el tiempo 320px establecer el tamaño de fuente es 320/15 es 21.33px
5, con el tamaño de nuestro elemento html dividido por diferentes tamaños de fuente encontrarán su proporción sigue siendo el mismo
6, tal como en el diseño de borrador de la norma 750, caja 100 es un 100 * rem se convierte a 100/50 2rem * 2rem; 320 pantalla, html tamaño de la fuente es 21,33 2rem = 42.66px anchura y altura caso o escalar; pero se ha logrado bajo pantalla diferente, caja de elementos de escala
valores de tamaño del elemento Método
1, la ecuación final: elementos de la página rem del valor de página = (PX) / (anchura de la pantalla / las partes divididas)
2, la pantalla partes de anchura / división html tamaño de fuente es el tamaño de
rem 3, una página o un elemento de página = valor de elemento / html font-size Tamaño