Directorio artículo
proyecto de terminal móvil hay que señalar que los cuatro temas
. 1) se proporciona ventana meta
prevenir página del lado de deslizamiento de un usuario ampliar o reducir, la necesidad de añadir index.html elemento meta, juego de la vista.
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
2) la reunificación cuestión de estilo CSS
que necesitamos para restablecer el estilo de página, ya que en otro navegador móvil, el estilo CSS por defecto no es uniforme. Solución: utilice reset.css restablecer el estilo por defecto para todos los elementos
3) un borde de píxeles tema
algunos teléfonos móviles relativamente alta resolución, la pantalla es de 2 veces o 3 veces la pantalla, el navegador de su teléfono será los valores de los píxeles en CSS se muestran como dos o tres ancho físico
Solución: Agregar una biblioteca border.css utilizará el principio de desplazamiento de zoom será frontera de reposición. Cuando sólo tenemos que añadir un borde de píxeles en la etiqueta correspondiente al nombre de la clase, por ejemplo "border-bottom" nombre de la clase conforme a lo dispuesto en el borde inferior de un píxel se añade en la etiqueta
4) Haga clic en 300 ms problemas de latencia
en el desarrollo de terminales móviles, el uso de eventos clic antes de la puesta en práctica de 300ms retrasar en algunos modelos, que afectan a la experiencia del usuario. Solución: introducir fastclick.js .
base de terminales móviles
Fin principales navegadores móviles, Webkit núcleo compatible principalmente
desarrollado por el lado del teléfono móvil, la interfaz del teléfono analógico con Chrome dev y depuración
De ventana gráfica
del navegador muestra el área de contenido de la página de la pantalla se puede dividir en la ventana gráfica de ventana, la ventana gráfica visual y ViewPort ideales
diseño móvil que quieren hacer es ideal para la vista: cómo amplia su pantalla, más ventanas gráficas de presentación de ancho
que desee ventana ideales, es necesario añadir la página al terminal móvil de la etiqueta meta de visualización
-
Disposición de las vistas disposición de las vistas
-
Visual ventana de visualización visual
-
Ideal ventana idea ventana
etiqueta meta ventana
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
mapa dos veces
-
pixel Física y pixeles físicas que
el píxel físico: la resolución es, iphone pixel físico 750
en iphone8 Lane, pixel desarrollo 1px = físicas dos píxeles
-
La figura dos veces
ejemplo requiere un 50- 50 píxeles (píxeles CSS) imágenes directamente en un factor de 2, que iphone voluntad 100 100
Así 100 para poner una imagen 100, esta imagen reducida manualmente a 50 50 (píxeles CSS)
imagen preparada mayor que dos veces la necesidad real, este enfoque es el doble de la figura
múltiple corte figura cutterman figura. -
Antecedentes zoom
tamaño atributo de fondo de tamaño especificado de la imagen de fondo: anchura, altura,
unidad: longitud | porcentaje | portada | la contiene
la longitud de la escritura de sólo anchura o escribir sólo el cociente de la altura será como el zoom
porcentajes son relativos al padre cuadro de zoom
portada la imagen de fondo se expande a lo suficientemente grande como para cubrir completamente la imagen de fondo de manera que el área de fondo (anchura y relación altura estiramiento, para cubrir completamente la caja, puede haber algo de imagen de fondo incompleta)
la contiene la imagen ampliada al tamaño máximo de adaptarse completamente a la anchura y la altura del área de contenido (relación entre la anchura y la altura, anchura o altura de estiramiento cuando los alcances de la caja, ya no es estirado, puede haber áreas en blanco)
Ejemplo: hay un 50 - 50 caja requiere una imagen de fondo, la imagen se debe preparar 2 veces 100 100
la mitad de la imagen zoom, que es 50 * 50
div: Fondo-size: 50px, 50px
opciones de desarrollo móviles
- página final de movimiento frontal separada (principales) dominios de las URL más m (móvil) se puede abrir moviendo extremo m.jd.com dispositivo para evaluar, si se abre el dispositivo móvil, la página jitter extremo móvil
- diseño Fluid (porcentaje layout)
- diseño elástico de flexión (recomendado)
- menos rem + + diseño de medios consultas
- diseño híbrido
- PC sensible al cambio en el patrón terminal móvil compatible determinado por el ancho de la pantalla para dar cabida a diferentes terminales
- consultas de los medios
- oreja
Terminar navegador móvil
navegador del cliente móvil de núcleo básico WebKit, por lo tanto los problemas de compatibilidad a considerar cuando webkit desarrollo
puede estar seguro que se adaptan etiquetas H5 y el estilo CSS3
navegador prefijo privada sólo tiene que considerar la adición de webkit
CSS inicialización normalize.css
navegador error corregido
para proteger el valor por defecto valiosa
es modular, detalles del documento
CSS3 caja modelo
modo tradicional anchura se calcula (cuadro de dimensionamiento: contenido - caja ): Ancho de la anchura de la caja = CSS conjunto + frontera + acolchado
CSS3 modelo de caja (caja de dimensionamiento: frontera-box ): anchura de la caja = ancho establecido CSS anchura (que contiene el relleno y el borde)
casete se proporciona la cantidad de, relleno, y a continuación, la frontera de la caja no se estirará
- El terminal móvil puede todo modelo de caja CSS 3
- Si necesita el lado del PC es totalmente compatible con las tradicionales; si no tenemos en cuenta la compatibilidad, utilizando el modelo de cuadro de CSS 3
estilo especial móvil de gama
con desplazamiento individual página final
diseño de fluidos
Es la distribución porcentual, también conocido como no-pixel fijo diseño (común)
expansión y contracción por el ancho de la caja receptora a un porcentaje, de acuerdo con la anchura de la pantalla. pixel fijos no limitada, a ambos lados del contenido de relleno
anchura máxima max-anchura (max-height) excede este valor no se escala
anchura mínima-min anchura (min-altura)
diseño de flex
Disposición principio
de diseño flexible y elástico Box, proporcionando la máxima flexibilidad para el modelo de caja, cualquier recipiente se puede especificar como el diseño de la flexión.
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
- Cuando el padre se flexione el diseño de la caja, elementos secundarios flotan, borrar, y vertical-align propiedad fallará
- Elásticamente estiramiento layout = layout = layout = caja del cartucho telescópica elástica layout = diseño Flex
- El uso de elementos de diseño de Flex, Flex llama recipiente (contenedor de flexión). Es todos los elementos secundarios automáticamente se convierten en un miembro de un contenedor, un proyecto llamado Flex (punto flex)
propiedad Parent común
- flex-dirección: ajustar el husillo en una dirección (es decir, dirección de disposición del artículo)
Row (defecto es de izquierda a derecha) | fila-inversa | columna | columna-inversa;
husillo y el eje de lado va a cambiar, ver flex-direaction proporcionado quién huso, el otro es el eje de lado. Nuestros sub-elementos están dispuestos a lo largo del husillo - justificar-contenido: Conjunto
主轴de la disposición de sub-elementos ( Antes de utilizar esta propiedad, en primer lugar determinar el buen husillo que )
Flex-Start (el valor por defecto es alineado a la izquierda) | flex-extremo derecho alineado | Centro |space-between先两端贴边，再平分剩余空间| espacio versátil que divide en dos el espacio restante margin-left, margen derecha de cada proyecto son iguales - flex-wrap: Permite definir si la envoltura elemento hijo
nowrap (por defecto no está envuelto) | envoltura | recapitulación inversa;
diseño Flex, los elementos secundarios predeterminados no están envueltos. Si el ajuste, lo que reduce automáticamente la anchura de la sub-elemento en el elemento padre en el interior de - align = left -Los artículos: Conjunto
侧轴disposición de elementos hijo en el ( línea única )
Flex-Start (por defecto arriba a abajo) | flex-end | centro (centro amontonados, centrado verticalmente) | línea de base | tramo (tramo, pero el niño no le dé una altura del elemento); - align = left -Contenido: Configuración de
侧轴la disposición de los sub-elementos en la ( multi-línea ) se producen en caso de subclave envoltura
flex-inicio (por defecto en el lado de cabeza del eje están dispuestos de partida) | flex-final | centro (el lado del eje intermedio) | espacio entre (niño biseca el espacio restante eje lateral) | espacio-en torno a (el primer niño en el lado de la distribución del eje en dos, entonces el espacio restante por igual) | Stretch (elemento hijo de la altura elemento padre es la altura de la bisectriz); - flex-flujo: propiedades del compuesto, mientras que corresponde a la flex-dirección y conjunto-wrap Flex
<flex-dirección> || <Flex-wrap>;
propiedad secundaria común
- flex: asignar el espacio restante ocupado por el sub
份数
flex: <número>, por defecto 0 - align-auto: niños de control en su disposición de eje lateral (propiedades pueden cubrir los ALIGN- artículos, si ninguno de los padres, es equivalente al estiramiento)
Automático (predeterminado hereda elemento padre align-artículos propiedad) | flex-inicio | flex-end | center | línea de base | tramo; - orden: definir el orden de los elementos
más pequeños que el valor numérico más adelante (opuesto z-index), el valor predeterminado 0
rem adaptación diseño
unidad rem
em es el elemento padre tamaño de la fuente
REM (la raíz em) es una unidad relativa, la referencia es 相对于html元素a 字体大小
tal como el elemento raíz (html) dispuesto font-size = 12 píxeles, siempre que la anchura del elemento no root: 2rem, px se convierte entonces en 24px
Rem ventajas: el tamaño de la parte interior de texto} pueden, para cambiar el tamaño de los elementos en la página modificando el html {, para lograr un control global
consultas de los medios
CSS3 consulta de medios es una nueva sintaxis
- El uso de diferentes consultas @meida para diferentes tipos de medios puede definir el estilo
@media可以针对不同的屏幕尺寸设置不同的样式- 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
- Para evitar la confusión, de acuerdo con las consultas de medios de pequeño a grande (recomendado) o para escribir descendente, hay una superposición CSS
sintaxis Especificación
@media mediatype and | not | only (media feature) {
CSS-Code;
}
<style>
//在屏幕上，并且最大宽度是800像素（<=800px），设置样式
@media screen and (max-width: 800px){}
</style>
- tipos de consulta MediaType
se dividirán en diferentes dispositivos terminales de diferentes tipos
todos para todos los dispositivos; de impresión a una impresora y vista previa de impresión, pantalla de pantallas de ordenador, tabletas, teléfonos inteligentes - Palabras clave
tipos de medios o más propiedades de medios vinculados entre sí, como condición preguntas de los medios
y se conectan a varias propiedades de medios entre sí "y"
no excluyen un tipo de medio "no"
noly especificar un tipo particular de medios - Características de los medios de comunicación
de ancho
-min anchura
max-ancho
La introducción de los recursos
cuando se compara variedad de estilos, que pueden para diferentes tamaños de pantalla, diferentes hojas de estilo en
principio: para determinar el tamaño del dispositivo en el enlace directo, los diferentes archivos CSS de referencia
<link rel="stylesheet" href="mystylesheet.css" media="mediatype and|not|only (media feature)" >
menos fundación
CSS es un lenguaje no de procedimiento, no hay variables, funciones, alcance
Menos (Hojas Leaner estilo) CSS es una extensión del lenguaje, también conocido como preprocesador CSS
npm install -g less
lessc -v 查看版本
- myless.less
- @ Nombre de la variable: valor, aplicar colores y valores
- Cuanto menos css compilado en un archivo, html en uso
- menos de anidamiento: No selectora
.header{
a{ //1. 子元素的样式直接写到父元素里面
color: red;
&：hover{ //2.如果有伪类选择器，伪元素选择器，交集选择器，内层选择器的前面需要加&，a：hover{ }
color: blue;
}
}
}
- Menos operación
cualquier número, color o las variables están involucrados en el cálculo de
operador intermedia ha dejado espacios separados: 1px + 5
tiene un primer valor a un valor entre las diferentes unidades de cálculo, el resultado del cálculo de la unidad
entre los dos valores si unidad tiene sólo un valor, el resultado del cálculo se ha podido recuperar la unidad
esquema de adaptación rem
- Algunos elementos no pueden hacer la adaptación geométrica, para cambiar el tiempo cuando el tamaño del dispositivo, tales como la proporción de adaptar el dispositivo de corriente
- consultas utilizan multimedia, ajustar el tamaño de fuente proporcionalmente html dependiendo del dispositivo; y elementos de página utilizando dimensiones reales de hacer, cuando html cambiar el tamaño de fuente, el tamaño del elemento van a cambiar, a fin de lograr la escala geométrica de adaptación
Y el proyecto de diseño puede escalar la anchura del aparato, el html raíz dinámicamente calcula y conjunto de fuentes de tamaño tamaño de la etiqueta (consulta de medios)
el CSS, la anchura y la altura, la posición relativa de los elementos del proyecto de valor de diseño, etc., de acuerdo con las mismas unidades de escalamiento rem el valor
- Las consultas menos + Media + rem
- flexible.js + rem
Desarrollo de respuesta
Se requiere un padre como un contenedor de diseño, para que coincida con los sub-elementos para lograr el efecto
principio: en pantalla diferente para cambiar el tamaño de la disposición del recipiente a través de la consulta de medios y, a continuación cambia la disposición y el tamaño de dentro de sub-elementos,
que resultan en pantalla diferente, ver diferentes diseños de página y el cambio estilos, por lo que diferentes dispositivos adaptadores
marco de desarrollo front-end Bootstrap
http://bootstrap.css88.com/, 3.xx recomendada
control sobre el propio marco, el usuario debe ser desarrollado de acuerdo con las disposiciones de un marco normativo
contenedor de diseño
Bootstrap necesita un contenido de la página .container contenedor de paquete y el sistema de red, .contain una clase predefinida Bootstrap
- Tipo de recipiente
contenedor de diseño de respuesta, ancho fijo (con diferentes anchuras en diferentes tamaños de pantalla, sin uso de soportes de consulta a)
una pantalla grande (> = 120px) anchura que 1170px
la pantalla (> = 992px) ancho que 970 píxeles
pequeña pantalla ( > = 768px) 750px anchura que
la pequeña pantalla de ultra (100%) - recipiente de fluido basado
contenedor de diseño de flujo, ancho completo
ocupar toda la ventana gráfica (el visor) un recipiente
adecuado para el desarrollo de un terminal móvil separada
Rejilla sistema de
diseño de página sistemas de red se divide en columnas de igual anchura, que se define por el diseño modular del número de página de columnas
Bootstrap proporciona un sistema de rejilla de streaming prioridad del dispositivo móvil en respuesta, con la pantalla o ventana gráfica aumento de tamaño, el sistema automáticamente se dividirá en un máximo de 12
Bootstrap anchura fija en el interior del recipiente, pero en diferentes pantallas, diferentes anchuras de contenedor, que luego se divide en 12 partes alícuotas recipiente
ya contiene Normalize.css
parámetro de Opciones de cuadrícula
si la suma niño comparte
igual a 12, entonces el niño puede llenar toda la anchura del recipiente es
menor que 12, los niños representaban menos de toda la anchura del contenedor, habrá huecos
mayores que 12, entonces el exceso que será otra columna ya que su espectáculo
columna anidada
y luego la columna como una 12 alícuota
no añade valor de margen, la implementación interna es igualmente anchura, float = left
Columna compensado
correctas elemento de mando
partes offset = 12 dos partes de la caja
, cuando sólo una caja, quiere efecto de centrado, entonces el desplazamiento 12-- partes del casete / 2
columnas se ordenan
, el lado derecho de la caja de la izquierda tirar de la lengüeta de arrastre, empuje el lado izquierdo de la caja para el empuje a la derecha
de la herramienta respuesta
visibles-xs, visible-sm, visible-LG es un gráfico que muestra el contenido de una página
