Adaptável é um conjunto de modelos que se adaptam a todos os terminais, mas o layout visto em cada dispositivo é o mesmo, comumente conhecido como largura adaptativa.
Um conjunto de modelos responsivos se adapta a todos os terminais, mas o layout visto por cada dispositivo pode ser diferente.
Embora o web design responsivo/adaptativo traga desvantagens como carga de trabalho pesada de compatibilidade com vários dispositivos, código complicado e longo tempo de carregamento, eles são multiplataforma e terminais, podem ser projetados uma vez, são universalmente aplicáveis e podem ser adaptados de acordo com resolução de tela e zoom automático de imagens e ajuste automático de layouts não são apenas implementações técnicas, mas também uma nova maneira de pensar sobre design.
A solução para muitos sites é fornecer diferentes páginas da web para diferentes dispositivos, como fornecer uma versão móvel dedicada ou uma versão para iPhone/iPad. Embora isso garanta o efeito, é mais problemático e requer a manutenção de várias versões ao mesmo tempo. Além disso, se um site tiver vários portais, aumentará muito a complexidade do projeto arquitetônico.
A adaptação ainda expõe um problema. Se a tela for muito pequena, mesmo que a página da web possa ser adaptada ao tamanho da tela, parecerá que o conteúdo está muito lotado quando visualizado em uma tela pequena. A capacidade de resposta é um conceito derivado para resolver isso. problema. Ele pode reconhecer automaticamente a largura da tela e ajustar o design da web de acordo. O layout e o conteúdo exibido podem mudar.
Experiência adaptativa http://m.ctrip.com/html5/ Experiência responsiva http://segmentfault.com/
Jardim secreto CSS http://www.csszengarden.com/
http://caibaojian.com/demo/ued/
2. Conhecimento básico de capacidade de resposta 1. Definir metatag<nome meta = conteúdo da janela de visualização = largura = largura do dispositivo, escala inicial = 1,0, escala máxima = 1,0, escalonável pelo usuário = não>
Vários parâmetros deste código são explicados:
§largura = largura do dispositivo: A largura é igual à largura do dispositivo atual
§escala inicial: escala inicial (a configuração padrão é 1,0)
§escala mínima: A escala mínima na qual o usuário pode aplicar zoom (o padrão é 1,0)
§escala máxima: A escala máxima que o usuário pode aplicar zoom (padrão definido como 1,0)
§escalável pelo usuário: se o usuário pode aplicar zoom manualmente (o padrão é não, porque não queremos que os usuários aumentem e diminuam o zoom da página)
2. Consulta de mídia A consulta de mídia CSS3 é um fator chave na realização de um design responsivo. Você pode usar o recurso de consulta de mídia para que a página use diferentes blocos CSS com base na largura do dispositivo.
As seguintes regras CSS entrarão em vigor quando a largura da tela for menor ou igual a 980:
@media (orientação: retrato) e (largura máxima: 460px) { .video .innerBox .news a.more { display: none } .video .innerBox .news span { display: none } .video .innerBox .news; { largura: 100% } .video .innerBox .news ul { largura: 100%; }}orientação: retrato paisagem |
retrato:
Especifica que a altura da área visível da página no dispositivo de saída especificado é maior ou igual à largura
paisagem:
Exceto pelo valor retrato, todos são paisagem
Selecione Carregar CSS para carregar o arquivo smallScreen.css se a largura da tela estiver entre 400 pixels e 600 pixels.
<link rel=stylesheet type=text/cssmedia=screen e (largura mínima: 400px) e (largura máxima do dispositivo: 600px) href=smallScreen.css />
3. Layout percentual
3. Design de página responsivo, fontes e processamento de imagem1. Processo de design de página responsiva HTML5/css3
Passo 1: Determine o tipo de dispositivo e o tamanho da tela que precisam ser compatíveis: incluindo dispositivos móveis (celulares, tablets) e PCs. Para dispositivos móveis, preste atenção ao adicionar funções de gestos ao projetá-los e implementá-los.
Tamanho da tela: incluindo vários tamanhos de tela de celular (incluindo horizontal e vertical), vários tamanhos de tablet (incluindo horizontal e vertical), telas de computador comuns e widescreens.
Etapa 2: Faça diferentes protótipos de wireframe para os tamanhos determinados. Você precisa considerar como o layout da página muda em diferentes tamanhos, como dimensionar o tamanho do conteúdo, a exclusão de funções e conteúdo e até mesmo como operar em ambientes especiais. Design especializado, etc. Este processo requer uma comunicação estreita entre designers e desenvolvedores front-end.
Passo 3: Design visual Importe as imagens para o dispositivo correspondente para alguns testes simples, que podem nos ajudar a encontrar problemas de acessibilidade, legibilidade, etc.
Em comparação com o desenvolvimento web tradicional, as páginas de design responsivo apresentam alterações no layout da página e no tamanho do conteúdo, portanto, é mais provável que o resultado final seja muito diferente do rascunho do design, exigindo mais comunicação entre desenvolvedores front-end e designers.
2. Fontes responsivas
Comparação entre várias unidades diferentes em CSS
px: pixel. Unidade de comprimento relativo, o tamanho é determinado pela resolução da tela. (Cooperando com consultas da mídia)
em: unidade de comprimento relativo. Equivalente ao tamanho da fonte do texto no objeto atual ou relativo ao tamanho da fonte padrão do navegador se o tamanho da fonte atual do texto embutido não estiver definido. O valor de em não é fixo, ele herda o tamanho da fonte do elemento pai. Todos os navegadores não modificados estão em conformidade com: 1em=16px. Então 12px=0,75em,10px=0,625em. Para simplificar a conversão do tamanho da fonte, você precisa declarar Font-size=62,5% no seletor de corpo em CSS, o que faz com que o valor em se torne 16px*62,5%=10px, então 12px=1,2em, 10px=1em , também Ou seja, você só precisa dividir o valor px original por 10 e depois mudar para em como unidade.
rem: uma nova unidade relativa em CSS3. A principal diferença de em é que ao usar rem para definir o tamanho da fonte de um elemento, ele ainda é um tamanho relativo, mas é relativo apenas ao elemento raiz HTML. Pode-se dizer que esta unidade combina as vantagens do tamanho relativo e do tamanho absoluto. Por meio dela, você pode ajustar todos os tamanhos de fonte proporcionalmente, modificando apenas o elemento raiz, e pode evitar a reação em cadeia de composição de tamanhos de fonte camada por camada. Atualmente, todos os navegadores, exceto IE8 e anteriores, suportam rem. Para navegadores que não suportam isso, a solução é muito simples, que é escrever uma instrução de unidade absoluta adicional. Esses navegadores ignoram os tamanhos de fonte definidos com rem.
%: Além disso, também podemos usar porcentagem para especificar o tamanho, que representa o múltiplo da fonte atual em relação ao tamanho da fonte padrão do navegador. Esta unidade também é frequentemente usada em design responsivo de página.
html{tamanho da fonte:62,5%;/* 10÷16=62,5% */}corpo{tamanho da fonte:12px;tamanho da fonte:1,2rem;/* 12÷10=1,2 */}p{tamanho da fonte :14px;tamanho da fonte:1.4rem;}Deve-se notar que, para ser compatível com navegadores que não suportam rem, precisamos escrever o valor px correspondente na frente de rem, para que os navegadores que não o suportam possam ser rebaixados normalmente. Na verdade, você não precisa se preocupar muito em usar o font-size: 100% padrão ou defini-lo como font-size: 62,5%. Se você introduzir uma ferramenta de pré-processamento CSS, poderá usar naturalmente o valor padrão. Se você usar font-size: 62,5% por outros motivos, não há nada de errado com isso, você pode redefini-lo para o tamanho de fonte padrão necessário no corpo.
3. Processamento responsivo de imagem e vídeo
http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#
1. Imagem de fundo ---- consulta de mídia
2. Liquefação de imagem ---- imagem elástica
img, objeto {largura máxima: 100%;}https://www.filamentgroup.com/examples/responsive-images/3.Elemento HTML5 <imagem>
O elemento HTML5 <picture> pode definir várias imagens.
Suporte ao navegador
<imagem> <source srcset=images/img_smallflower.jpg media=(max-width: 400px)> <source srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg style="margin: 0px; preenchimento: 0px; contorno: nenhum; altura da linha: 25,2px; tamanho da fonte: 14px; largura: 660px; overflow: oculto: ambos; família de fontes: tahoma, arial, Microsoft YaHei;"><script src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>4. Use tags noscript para criar imagens responsivas
Js carregamento dinâmico de imagens grandes e pequenas
<span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=seu texto alternativo class=responsivize> <img src=big.jpg></noscript > <script type=text/javascript>var ResponsiveImageTag = { replaceInitialImages:function(respons) { var platform = desktop; resImage = '.'+respons; var ResponsiveImages = $(resImage); noOfresponsiveImages = ResponsiveImages.length; //Teste de largura do dispositivo de exibição atual if(screen.width <= 767){//767px, menor que ipad Eles todos pensam que é mobile platform = mobile } //definir o elemento fonte inicial na imagem for(i = 0; i < noOfresponsiveImages; i = i + 1 ){ var noScriptElem = $(responsiveImages[i]); = celular){ img.src = noScriptElem.attr(data-mobilesrc }else{); img.src = noScriptElem.attr(data-fullsrc } img.className = responsivo; ); } }};responsiveImageTag.replaceInitialImages('responsivize');$(window).resize(function(){ responsivoImageTag.replaceInitialImages('responsivize');});</script>4. Estrutura responsivaPersonalização: Se o seu site tem um grande número de designs diversos, então se você ainda quiser usar o bootstrap, você precisa modificar a estrutura como a camada inferior: um grande número de estilos precisa ser copiado, e a hierarquia CSS é confusa e difícil de manter.
Em algumas situações, o bootstrap é muito útil. Por exemplo, se você deseja construir rapidamente um site pessoal relativamente bonito, um site corporativo, uma interface de gerenciamento de back-end de blog e outros projetos que não exigem muita personalização de página, eles geralmente são mais adequados para projetos de back-end. estilos de concessão e não são fáceis de aprofundar. Ou você pode ser inexperiente na construção de um front-end de site, considerando a compatibilidade do navegador e os inúmeros tamanhos de dispositivos que resolverão muitos dos problemas para você.