Status do navegador
Navegadores comuns no PC: navegador 360, navegador Google, navegador Firefox, navegador QQ, navegador Baidu, navegador Sogou, navegador IE.
Navegadores comuns no terminal móvel: navegador UC, navegador QQ, navegador Oppen, navegador móvel Baidu, navegador de segurança 360, navegador Google, etc.
Resumo: Compatível com navegadores móveis convencionais, só precisa processar o kernel do webkit
O estado atual das telas de telefones celulares
O tamanho da tela dos dispositivos móveis é muito grande, e a tela quebrada é muito grave. A unidade comum é px
Tamanhos comuns de tela de celular
Método de depuração móvel
Resumindo
- O navegador móvel é voltado principalmente para o núcleo do webkit
- Os terminais móveis comuns destinam-se principalmente ao desenvolvimento de terminais móveis
- A tela quebrada do terminal móvel é muito grave, a resolução e o tamanho da tela são diferentes
- Aprenda a usar o navegador Google para simular a interface e depuração do telefone móvel
Janela de exibição
O navegador é a área da tela onde a página é exibida
Viewport: viewport de layout viewport visual viewport ideal
Janela de visualização de layout
Principalmente para resolver o problema da exibição inicial de páginas de PC em telefones celulares, basicamente defina a resolução da janela de visualização para 980px
Janela de visualização visual
A área do site não afeta a janela de visualização do layout
Janela de visualização ideal
- A janela de visualização ideal é o tamanho de janela de visualização apropriado para o dispositivo
- Para adicionar manualmente meta tags de janela de visualização para manipular a janela de visualização
- Compreenda simplesmente a largura do dispositivo e a largura da janela de visualização do layout
Resumindo
- A janela de visualização é a área da tela onde o navegador exibe a página.
- Viewport: viewport de layout viewport visual viewport ideal
- A janela de visualização ideal é o tamanho de janela de visualização mais adequado para o dispositivo. Entendimento simples: a largura do dispositivo, a largura da janela de visualização do layout
meta tag
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Nota: O rótulo da janela de visualização deve ser adicionado ao terminal móvel, caso contrário, haverá muitos problemas no desenvolvimento do terminal móvel
Janela de visualização padrão
- A largura do dispositivo deve ser consistente com a largura da janela de visualização
- Sem zoom
- A proporção de zoom inicial é 1
- A proporção máxima de zoom é 1
- A taxa de zoom mínima é 1
Razão de pixel físico para pixel físico
- O pixel físico se refere à menor partícula exibida na tela, que é fisicamente real
- Durante o processo de desenvolvimento, 1px é igual a 1 pixel físico no lado do PC, mas no lado móvel, 1px não é igual a 1 pixel físico.
- 1px é igual ao número de pixels físicos, que é chamado de proporção física de pixels
早期的移动端开发，1px等于1个物理像素点，随着视网膜技术的出现，将更多的物理像素点压缩至一块屏幕中，提高屏幕的分辨率，使屏幕看起来更加清晰`
Gráfico múltiplo
No desenvolvimento real, a imagem será ampliada n vezes na tela de retina
A imagem que preparamos é n vezes maior do que a imagem real e, em seguida, reduzida manualmente em n vezes, para que a imagem não fique mais desfocada
<!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>
Imagem de fundo
background-size: especifica o tamanho da imagem de fundo
- Unidade: comprimento | porcentagem | converter | conter
- capa: a imagem de fundo é expandida para ficar grande o suficiente para que a imagem de fundo possa cobrir completamente a área de fundo.
- contêm: a imagem de fundo é expandida para o tamanho máximo, de modo que sua altura e largura sejam totalmente adaptadas à área de conteúdo
Nota: Grave apenas uma unidade, o padrão é largura
<!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>
Múltiplo de fundo
É consistente com a prática de várias imagens, mas o contêiner deve ser reduzido à mesma imagem de fundo
<!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>
Opções de desenvolvimento para celular
Crie uma página separada para celular
- Versão móvel JD Mall
- Versão da tela de toque do Taobao
- Suning Tesco Mobile Edition
Adicione m na frente da área do site para abrir a página móvel
Página responsiva e terminal móvel
Site oficial da Samsung
Core: mude o estilo de acordo com a largura da tela para se adaptar a diferentes terminais
A produção de página responsiva é mais problemática e requer muito esforço para ajustar os problemas de compatibilidade
Resumindo
- Compatível com páginas móveis só precisa ser compatível com o kernel do webkit
- Você pode usar os novos recursos do h5 e css3 com confiança
- O prefixo privado do navegador só precisa adicionar webkit
Soluções de tecnologia móvel
Apresente o estilo de inicialização css: normalize.css
Download oficial: https://necolas.github.io/normalize.css/8.0.1/normalize.css
Estilo especial
Modelo de caixa CSS
- Modelo de caixa tradicional: a largura da caixa = largura + preenchimento + borda
- modelo da caixa css3: a largura da caixa = largura (borda + preenchimento)
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
Nota: O terminal móvel pode usar com segurança o modelo de caixa css3, e o terminal de pc também pode usar o modelo de caixa css3 se a compatibilidade não for considerada
<!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>
Remover efeito de destaque
-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 do botão
-webkit-aparência: nenhum;
<!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>
Proibir o menu pop-up da página pressionada longamente
-webkit-touch-callout: nenhum;
<!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>
Layout comum no celular
Produção separada de páginas para celular (mainstream)
- Layout de porcentagem
- layout flexível
- rem + menos + consulta de mídia
- Layout misto
Páginas responsivas compatíveis com terminais móveis
- Inquéritos da mídia
- bootstarp
Esquema de fluxo
- Layout de fluxo: layout de porcentagem, também conhecido como layout fixo sem pixel
- A largura é definida como uma porcentagem, não limitada por pixels fixos, e o conteúdo se estende para ambos os lados
- O layout de porcentagem é um método de layout comum para o desenvolvimento da web móvel
<!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>
