O que é layout responsivo?
Layout responsivo significa que a mesma página possui layouts diferentes em tamanhos de tela diferentes. Hoje, quando a Internet móvel está altamente desenvolvida, as páginas web que desenvolvemos em navegadores de desktop não conseguem mais atender às necessidades de visualização em dispositivos móveis. O método de desenvolvimento tradicional é desenvolver um conjunto de páginas no lado do PC e outro conjunto de páginas no lado móvel. Mas isso é muito problemático. Com cada vez mais terminais diferentes, você precisa desenvolver várias versões diferentes da página. Para usar o layout responsivo, você só precisa desenvolver um conjunto. EthanMarcotte propôs o conceito de layout responsivo em maio de 2010. Resumindo, um site pode ser compatível com vários terminais.
A diferença entre desenvolvimento responsivo e desenvolvimento separado para dispositivos móveis e PC: O desenvolvimento responsivo grava apenas um conjunto de interfaces e exibe diferentes layouts e conteúdos, detectando a resolução da janela de visualização e processando código no cliente para diferentes clientes. O terminal móvel e o terminal PC são desenvolvidos separadamente. Ao detectar a resolução da janela de visualização, ele pode determinar se o dispositivo atualmente acessado é um PC, tablet ou telefone celular, solicitando assim o servidor e retornando páginas diferentes.
Qual é o princípio do desenvolvimento responsivo?
O princípio do desenvolvimento responsivo é usar Media Query em CSS3 para definir diferentes layouts e estilos para dispositivos de diferentes larguras para se adaptarem a diferentes dispositivos.
Definição e uso da consulta SS3 @media:
Usando a consulta @media, você pode definir diferentes estilos para diferentes tipos de mídia. @media pode definir diferentes estilos para diferentes tamanhos de tela, especialmente se você precisar configurar uma página responsiva, @media é muito útil. Quando você redefine o tamanho do navegador, a página também será renderizada novamente com base na largura e na altura do navegador.
Por exemplo, se a largura da tela for inferior a 500 pixels, altere a cor de fundo para vermelho.
Para implementar o layout responsivo, os métodos comumente usados incluem o seguinte:
(1) Utilize media queries em CSS (o mais simples);
(2) Use JavaScript (o custo de uso é relativamente alto);
(3) Use estruturas de código aberto de terceiros (como bootstrap, que pode suportar vários navegadores).
Definir metatag
Primeiro, precisamos definir a meta tag para informar ao navegador para tornar a largura da janela de visualização (a área visível da página da web) igual à largura do dispositivo e proibir o usuário de aumentar o zoom na página, como mostrado abaixo:
<metaname=viewportcontent=largura=largura do dispositivo,escala inicial=1,escala máxima=1,escalável pelo usuário=não>
Ao definir a viewport, você precisa prestar atenção. A viewport é o tamanho da área visível da página da web. Ao definir a viewport, você não precisa se preocupar com a altura específica. a altura é automaticamente expandida pelo conteúdo da página da web. O significado do conteúdo da meta tag acima é o seguinte:
● viewport: Viewport, que representa a área visível da página web;
●largura: Controla o tamanho da janela de visualização. Você pode especificar um valor específico, como 600, ou um valor especial composto por palavras-chave. Por exemplo, largura do dispositivo representa a largura do dispositivo.
●escala inicial: indica a proporção de escala inicial, que é a proporção de escala quando a página é carregada pela primeira vez;
●escala máxima: Indica a proporção máxima que o usuário pode ampliar, variando de 0 a 10,0;
●escala mínima: Indica que é permitido ao usuário ampliar até a escala mínima, variando de 0 a 10,0;
●escalável pelo usuário: Indica se o usuário pode aplicar zoom manualmente, "sim" significa que o dimensionamento é permitido, "não" significa que o dimensionamento é proibido.
consultas da mídia
As consultas de mídia CSS podem definir diferentes estilos CSS para diferentes tipos de mídia (impressão de tela) com base em condições especificadas, para que usuários que usam dispositivos diferentes possam obter a melhor experiência.
Use HTML como exemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1><title>Tutorial introdutório à página responsiva: Albert Yang</title><linkrel =stylesheethref=style.css><linkre l=stylesheethref=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssintegrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnNcrosso Rigin=anonymous></head><body><header><ahref=#>AlbertYang</a><ul><li><ahref=#>Página inicial</a></li><li><ahref= #>Blog</a></li><li><ahref=#>Entre em contato comigo</a></li><li><ahref=#>Quadro de mensagens</a></li><li> <ahref=#>Sobre mim</a> </li><li><ahref=#>Parede de fotos</a></li></ul><div><inputtype=textplaceholder=Search><iclass=fafa-searcharia-hidden=true></i </div></header><div><div><h2>Layout responsivo</h2><p>Layout responsivo significa que a mesma página tem layouts diferentes em tamanhos de tela diferentes. O método de desenvolvimento tradicional é desenvolver um conjunto para PC e outro conjunto para celular. Porém, ao usar layout responsivo, você só precisa desenvolver um conjunto. A diferença entre design responsivo e design adaptativo: o design responsivo desenvolve um conjunto de interfaces e exibe diferentes layouts e conteúdos detectando a resolução da janela de visualização e processando o código no lado do cliente para diferentes clientes. O design adaptativo requer o desenvolvimento de vários conjuntos de interfaces; , ao detectar a resolução da janela de visualização, é determinado se o dispositivo atualmente acessado é um PC, tablet ou celular, solicitando assim a camada de serviço e retornando páginas diferentes. As consultas de mídia CSS3 nos permitem definir estilos diferentes para diferentes tipos de mídia. Quando o tamanho da janela do navegador é redefinido, a página também será renderizada novamente com base na largura e altura do navegador. </p><ahref=#>Leia o texto completo</a></div><imgsrc=img.png></div></body></html>
Resultados em execução:
A seguir está um exemplo abrangente para demonstrar a implementação do layout responsivo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Layout responsivo</title><metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1, usuário -scalable=no/><style>*{margem:0px;padding:0px;font-f amily:Microsoft Yahei;}#head,#foot,#main{height:100px;width:1200px;/*width:85%;*/background-color:goldenrod;text-align:center;font-size:48px ; line-height:100px;margin:0auto;}#headdiv{display:none;font-size:20px;h oito:30px;largura:100px;cor de fundo:verde;float:direita;altura da linha:30px;margem superior:35px;}#headul{largura:80%;}#headulli{largura:20%;float: left;text-align:center;list-style:none;font-size:20px;}#main{ele right:auto;margin:10pxauto;overflow:hidden;}.left,.center,.right{height:600px;line-height:600px;float:left;width:20%;background-color:red}.center{ largura:60%;borda esquerda:10pxsolid#FFF;borda direita:10pxso lid#FFF;box-sizing:border-box;}@mediaonlyscreenand(max-width:1200px){#head,#foot,#main{width:100%;}}@mediaonlyscreenand(max-width:980px){. direita{display:none;}.esquerda{largura:30%;}.centro{largura:70%;borda- right:hidden;}}@mediaonlyscreenand(max-width:640px){.left,.center,.right{width:100%;display:block;height:200px;line-height:200px;}.center{borda: oculto;borda superior:10pxsolid#FFFFFF;borda inferior:10pxso tampa#FFFFFF;altura:600px;altura da linha:600px;}#headul{display:none;}#headdiv{display:block;}}</style></head><body><div><headerid=head ><ul><li>cabeçalho1</li><li>cabeçalho2</li><li>cabeçalho2</li><li>cabeçalho2</li>< li>header2</li></ul><div>ícone</div></header><sectionid=main><divclass=left>esquerda</div><divclass=center>centro</div><divclass =direita>direita</div></section><footerid=foot>rodapé</footer></div></body></html>Resultados em execução:
