Passos para construir a sua capacidade de respostadrupal 7 tema1) Entenda o projeto e decidir sobre os pontos de interrupção.

2) Comece com o seu tema arquivo de informações

name = RoboSmart

description = Um móvel-primeiro layout responsivo para um site corporativo.

version = VERSÃO

core = 7.x

stylesheets [all] [] = css / style.css <

3) Criar páginas HTML5 para cada página exclusiva em seu site.

Com base no sistema de rede e da natureza do seu projeto, grades de download dehttp://960.org . No caso do tema RoboSmart nós usamos uma rede única de 600 que éfluido e funciona para qualquer resolução de tela maior do que 600px.

Comece com o projeto móvel e mova o caminho para todos os pontos de interrupção.Converter as páginas HTML5 para arquivos de modelo. Este passo é similar ao dequalquer tema geral drupal excepto que o mesmo modelo é aplicável a vários pontos deinterrupção. Se você estiver usando HTML5 certifique-se de começar com a declaraçãoem seu arquivo html.php.tpl.

Validar o esboço sua página gera usando um delineador. Estruturar as tags HTML5 etags de cabeçalho para alcançar o contorno desejado. Sua maneira de trabalhar a partirdo menor para o maior ponto de interrupção, ou seja, a partir do projeto móvel, é umaspecto importante da primeira abordagem móvel.

4) Separe os estilos para os diferentes pontos de interrupção usando as perguntas damídia. Detalhado abaixo as opções para o uso de consultas de mídia.

Opção Multifile: Incorporar consultas de mídia no arquivo .info

folhas de estilo [todos] [] = css / style.css

folhas de estilo [Imprimir] [] = css / print.css

estilo [tudo e (min-width: 600px)] [] = css / grid-600.css

estilo [tudo e (min-width: 600px)] [] = css / style-600.css

estilo [tudo e (min-width: 480px)] [] = css / style-480.css

estilo [tudo e (min-width: 960px )] [] = css / style-960.css

stylesheets [all] [] = css / fonts.css

Opção de um único arquivo: Escrever consultas de mídia embutidos emarquivos CSS

mídia e todos (min-width: 461px) e (com largura máx: 900px) {

// estilos incorporar aqui

}

5) Incorporar viewport e outros meta tags específicas de dispositivos móveis / portáteisno arquivo html.php.tpl

<Meta content = nome "" width = "MobileOptimized" />

<meta content = nome "verdadeiro" = "HandheldFriendly" />

<content = "width =-largura do dispositivo" meta name = "viewport" />

<meta content = "on" http-equiv = "ClearType" />

6) Para ativar o suporte IE, adicionar arquivos Html5shiv, Respond.js e Selectivizr.js aseu tema.

7) Teste o seu tema em uma instalação padrão do Drupal. Voila! Aqui temos um temaDrupal 7, que é sensível.

Por trás das sceens ...

Consultas de mídiaConsultas de mídia CSS3 permitem verificar tipo de mídia e mídia características econdicionalmente folhas de estilo de carga. Isto é comumente usado para distinguirentre 'tela' e 'print'. O tipo de mídia de impressão é usado para definir os estilos paraimpressão.

print media {

// incorporar impressão de estilo

}

A consulta de mídia abaixo define a folha de estilo para todos os tipos de mídia. Tambémdemonstra o uso do recurso de mídia largura. Nos permite definir estilos para larguras

de tela entre 461px e 960px

media tudo e (min-width: 461px) e (com largura máx: 900px) {

// estilos incorporar aqui

}

Recursos de mídia são usados para definir as propriedades do agente do usuário. Algunsdos outros recursos de mídia incluem altura, orientação e proporção de tela.

Móveis meta tags amigáveis para o html.tpl.php<Meta name = "MobileOptimized" content = "width" />

Use para configurar o layout estreita em dispositivos, introduzido pela Microsoft.

<Meta name = conteúdo "HandheldFriendly" = "true" />

A meta-tag HandheldFriendly foi utilizado inicialmente pela Palm mais velhos emodelos Blackberry.

<Content = "width =-largura do dispositivo" meta name = "viewport" />

Certos dispositivos navegador exibir as páginas da web por auto de zoom. Para substituiresse recurso de zoom automático para páginas já otimizados, a meta tag viewport éusado. No nosso caso, a propriedade largura é usado. Aqui, a propriedade "width" édefinido como o visor do dispositivo. As outras propriedades de viewport inclui apropriedade escala inicial, que controla o nível de zoom quando a página é carregadapela primeira vez, a escala máxima, em escala mínima, e propriedades escalável pelousuário que controlam como o usuário aumentar o zoom dentro e fora da página. A metatag viewport é amplamente apoiada por smartphones modernos e não se limitando a,iOS e dispositivos Android.

<Meta http-equiv = conteúdo "ClearType" = "on" />

Permite tipo claro para dispositivos móveis Windows. Para mais detalhes sobre osmóveis amigáveis meta tags referem clichê móvel no github. "Placa de caldeira Mobile éa melhor linha de base prática para o seu aplicativo web móvel". (https://github.com/h5bp/mobile-clichê )

Otimização para o IEPara ativar o suporte IE adicionar arquivos Html5shiv, Respond.js e Selectivizr.js a seutema.

O que html5shiv.js fazer?

IE9 suporta HTML5 em parte, IE8 e abaixo não suportam HTML5. O html5shiv.js usa odocument.createElement ("tag") para criar novos elementos e força IE para tornar osestilos CSS para estas tags HTML5 gerados. ( http://code.google.com/p/html5shiv )

O que selectivizr fazer?

"Selectivizr é um utilitário que emula JavaScript CSS3 pseudo-classes e seletores deatributo no Internet Explorer 6-8. Basta incluir o script em suas páginas e selectivizrfará o resto. "( http://selectivizr.com ) Selectivizr faz cerca de 25 elementos de estiloCSS3 funciona no IE 6-8.

O que Respond.js fazer?

"O objetivo deste roteiro é fornecer um roteiro rápido e leve para permitir projetos webresponsivas em navegadores que não suportam CSS3 consultas de mídia - em particular,o Internet Explorer 8 ou menos. É escrito de tal forma que ele provavelmente irá corrigirsuporte para outros navegadores não apoiar também "(https://github.com/scottjehl/Respond )