🥇 Usando SASS para ser responsivo e pronto para retina

O design responsivo é muito mais do que apenas uma palavra da moda e um conjunto vagamente organizado de princípios – é uma técnica de design que exige que você aborde quase todos os problemas de maneira diferente de um site tradicional. Também é difícil codificar. Estamos profundamente empenhados em um novo design de site Hashrocket que é totalmente responsivo e usa ativos de retina – e desse projeto (e de outros semelhantes) terminamos com um ponto de partida bastante sólido para lidar com esses requisitos:

Faça com que o iOS se comporte de maneira responsável

Existem duas linhas de código cruciais de que você precisa para fazer praticamente qualquer coisa responsiva funcionar corretamente: uma metatag e uma webkittag.

Coloque isso em seu <head>:

%meta(name="viewport" content="width=device-width, initial-scale=1")

Isso apenas informa a janela de visualização para se adequar à largura do seu dispositivo (para que o modo paisagem não pareça maior do que o modo retrato, por exemplo) e dimensionar corretamente. Alguns Googlings dessa técnica também podem resultar em recomendações de código para adicionar um maximum-scalevalor; isso desativa o zoom de aperto e geralmente não é necessário.

Coloque isso em seu Sass (ou SCSS, o que for):

body
    -webkit-text-size-adjust: none

Você provavelmente conhece este – evita que o iOS dimensione seu texto para facilitar a leitura. Se o seu site responder corretamente, você está cuidando do tamanho da fonte com as consultas @mídia.

The Viewport Width Mixin

Este é o nosso mixin para nos mantermos sãos no mundo das consultas de mídia. (Este e outros exigem uma versão mais recente do Sass que suporte a passagem de blocos de conteúdo para mixins; você deve usá-lo de qualquer maneira.)

= max-width($width: 640)
    @media screen and (max-width: #{$width}px)
        @content

Fácil como uma torta. Basta definir o $widthvalor para o que você decidir ser o ponto de interrupção principal do seu site e adicionar outros conforme necessário. Isso nos permite escrever regras rapidamente e lê-las facilmente:

.foo
    margin: 60px
    +max-width
        margin: 40px
    +max-width(480)
        margin: 20px

The Retina Mixin

Os planos de fundo da retina são seu próprio conjunto de @mediador baseada. Aqui estão alguns mixins que tornaram nossas vidas mais fáceis:

= retina
    @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2)
        @content
= retina_bg($filename, $dimensions: false, $ext:"png")
    background-image: image-url("#{$filename}.#{$ext}")
    +retina
    background-image: image-url("#{$filename}@2x.#{$ext}")
    @if $dimensions != false
        background-size: $dimensions

O retinamixin é geralmente útil; o retina_bgmixin é absolutamente essencial. Com retina_bg, podemos escrever nossos estilos de imagem de fundo de retina em uma linha:

.bar
    +retina_bg("logo", 100px)

Agora, os dispositivos não retina usam , enquanto a retina usa , como a convenção de nome de arquivo do iOS. É importante notar que nem sempre é necessário, portanto, está atrás de uma condicional e não atribui se não for especificado.logo.pnglogo@2x.pngbackground-size

Cuide de si mesmo lá fora

Espero sinceramente que este post seja útil para você e não apenas aumentando o barulho das @mediadicas que estão por aí hoje em dia. Se você começar com essas peças, estará no caminho certo para escrever estilos responsivos que não atrapalhem o resto do seu CSS e o ajudem a manter todas as larguras e proporções classificadas.

(postado originalmente no The Hashrocket Blog )

Faça com que o iOS se comporte de maneira responsável

The Viewport Width Mixin

The Retina Mixin

Cuide de si mesmo lá fora

Related Posts