Estado del navegador
Navegadores comunes en PC: navegador 360, navegador Google, navegador Firefox, navegador QQ, navegador Baidu, navegador Sogou, navegador IE.
Navegadores comunes en el terminal móvil: navegador UC, navegador QQ, navegador Oppen, navegador móvil Baidu, navegador de seguridad 360, navegador Google, etc.
Resumen: Compatible con los principales navegadores móviles, solo es necesario procesar el kernel de webkit
El estado actual de las pantallas de los teléfonos móviles
El tamaño de la pantalla de los dispositivos móviles es muy grande y la pantalla rota es muy grave. La unidad común es px
Tamaños habituales de pantalla para móviles
Método de depuración móvil
para resumir
- El navegador móvil está dirigido principalmente al núcleo de webkit.
- Los terminales móviles comunes están destinados principalmente al desarrollo de terminales móviles.
- La pantalla rota del terminal móvil es muy grave, la resolución y el tamaño de la pantalla son diferentes
- Aprenda a usar el navegador de Google para simular la interfaz y la depuración del teléfono móvil
Viewport
El navegador es el área de la pantalla donde se muestra la página.
Ventana gráfica: ventana gráfica de diseño ventana gráfica visual ventana ideal
Ventana gráfica de diseño
Principalmente para resolver el problema de la visualización temprana de la página de la PC en teléfonos móviles, básicamente establezca la resolución de la ventana gráfica en 980px
Ventana visual
El área del sitio web no afecta la ventana gráfica de diseño.
Ventana ideal
- La ventana gráfica ideal es el tamaño de ventana apropiado para el dispositivo.
- Para agregar manualmente metaetiquetas de ventana para manipular la ventana
- Simplemente comprenda qué tan ancho es el dispositivo y qué tan ancha es la ventana gráfica de diseño
para resumir
- La ventana gráfica es el área de la pantalla donde el navegador muestra la página.
- Ventana gráfica: ventana gráfica de diseño ventana gráfica visual ventana ideal
- La ventana gráfica ideal es el tamaño de ventana gráfica más adecuado para el dispositivo. Comprensión simple: qué tan ancho es el dispositivo, qué tan ancha es la ventana gráfica de diseño
metaetiqueta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Nota: La etiqueta de la ventana gráfica debe agregarse en el terminal móvil, de lo contrario habrá muchos problemas en el desarrollo del terminal móvil.
Ventana estándar
- El ancho del dispositivo debe coincidir con el ancho de la ventana gráfica.
- Sin zoom
- La relación de zoom inicial es 1
- La relación de zoom máxima es 1
- La relación de zoom mínima es 1
Relación de píxel físico a píxel físico
- El píxel físico se refiere a la partícula más pequeña que se muestra en la pantalla, que es físicamente real
- Durante el proceso de desarrollo, 1 px es igual a 1 píxel físico en el lado de la PC, pero en el lado móvil, 1 px no es igual a 1 píxel físico.
- 1px es igual a la cantidad de píxeles físicos, que se denomina relación de píxeles físicos
早期的移动端开发，1px等于1个物理像素点，随着视网膜技术的出现，将更多的物理像素点压缩至一块屏幕中，提高屏幕的分辨率，使屏幕看起来更加清晰`
Gráfica múltiple
En el desarrollo real, la imagen se ampliará n veces en la pantalla de retina.
La imagen que preparamos es n veces más grande que la imagen real, y luego la reducimos manualmente n veces, de modo que la imagen ya no se verá borrosa.
<!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;
}
img:nth-of-type(2) {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<!-- 在移动端的实际开发过程中，我们准备的图像比实际的图像大n倍，然后再手动缩小原来的n倍，即可解决图像模糊的问题 -->
<!-- 50*50的图像 -->
<img src="./img/apple50(1).jpg" alt="">
<!-- 100*100的图像 -->
<img src="./img/apple100.jpg" alt="">
</body>
</html>
Imagen de fondo
background-size: especifica el tamaño de la imagen de fondo
- Unidad: longitud | porcentaje | conver | contener
- portada: la imagen de fondo se amplía para que sea lo suficientemente grande como para que la imagen de fondo pueda cubrir completamente el área de fondo.
- contener: la imagen de fondo se expande al tamaño máximo, de modo que su altura y ancho se adaptan completamente al área de contenido
Nota: solo escriba una unidad, el valor predeterminado es el ancho
<!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;
}
.box {
width: 600px;
height: 600px;
border: 1px solid red;
margin: 0px auto;
background: url(./img/picture.jpg) no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Fondo múltiple
Es consistente con la práctica de múltiples imágenes, pero el contenedor debe reducirse a la misma imagen de fondo.
<!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;
}
.box {
width: 50px;
height: 50px;
border: 1px solid red;
/* 背景图像：100*100 */
background: url(./img/apple100.jpg) no-repeat;
margin: 0px auto;
background-size: 50px 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Opciones de desarrollo móvil
Crea una página móvil separada
- Versión móvil de JD Mall
- Versión de pantalla táctil de Taobao
- Edición móvil Suning Tesco
Agregue m delante del área del sitio web para abrir la página móvil
Página receptiva y terminal móvil
Sitio web oficial de Samsung
Núcleo: Cambia el estilo según el ancho de la pantalla para adaptarse a diferentes terminales
La producción de páginas receptivas es más problemática y requiere mucho esfuerzo para ajustar los problemas de compatibilidad
para resumir
- Compatible con páginas móviles solo necesita ser compatible con el kernel de webkit
- Puede utilizar las nuevas funciones de h5 y css3 con confianza
- El prefijo privado del navegador solo necesita agregar webkit
Soluciones de tecnología móvil
Introduce el estilo de inicialización de CSS: normalize.css
Descarga oficial: https://necolas.github.io/normalize.css/8.0.1/normalize.css
Estilo especial
Modelo de caja CSS
- Modelo de caja tradicional: el ancho de la caja = ancho + relleno + borde
- modelo de caja css3: el ancho de la caja = ancho (borde + relleno)
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
Nota: El terminal móvil puede usar de forma segura el modelo de caja css3, y la terminal de PC también puede usar el modelo de caja css3 si no se considera la compatibilidad
<!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;
}
.box {
width: 800px;
height: 800px;
padding: 20px;
margin: 20px auto;
background-color: purple;
border: 5px solid red;
/* 引进css3盒子模型 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Eliminar efecto de resaltado
-webkit-tap-highlight-color: transparente;
<!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;
}
a {
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body>
<a href="#">尧子陌</a>
</body>
</html>
Estilo personalizado de botón
-aparición del kit de web: ninguna;
<!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;
}
input {
-webkit-appearance: none;
}
</style>
</head>
<body>
<input type="button" value="尧子陌">
</body>
</html>
Prohibir el menú emergente de pulsación prolongada de la página
-webkit-touch-callout: ninguno;
<!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;
}
img,
a {
-webkit-touch-callout: none;
vertical-align: middle;
}
</style>
</head>
<body>
<img src="./img/apple100.jpg" alt="">
<a href="https://www.baidu.com/">百度</a>
</body>
</html>
Diseño común en dispositivos móviles
Producción separada de páginas móviles (corriente principal)
- Disposición porcentual
- diseño flexible
- rem + less + media query
- Diseño mixto
Páginas receptivas compatibles con terminales móviles
- Consultas de los medios
- bootstarp
Diseño de flujo
- Diseño de flujo: diseño de porcentaje, también conocido como diseño fijo sin píxeles
- El ancho se establece como un porcentaje, no limitado por píxeles fijos, y el contenido se extiende a ambos lados.
- El diseño de porcentaje es un método de diseño común para el desarrollo web móvil
<!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;
}
section {
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 100px auto;
border: 1px solid red;
}
div {
width: 50%;
float: left;
height: 150px;
background-color: rgb(223, 25, 25);
}
div:nth-of-type(2) {
background-color: purple;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>
