Índice
Web design responsivo ou adaptável para diferentes dispositivos, serve para que nossos designs se encaixem perfeitamente na tela de qualquer dispositivo com conexão à Internet.O uso de consultas de mídia em CSS3 permite criar designs responsivos com consultas de mídia CSS3.
Uma consulta de mídia consiste em um tipo de mídia e pelo menos uma consulta que limita as folhas de estilo usando características de mídia como largura, altura e cor. Adicionadas ao CSS3, as consultas de mídia permitem que a exibição do conteúdo se adapte a uma gama específica de dispositivos de saída sem ter que alterar o próprio conteúdo.
As consultas de mídia consistem em um tipo de mídia e uma ou mais expressões, envolvendo características da mídia, que são resolvidas como verdadeiras ou falsas. O resultado da consulta é verdadeiro se o tipo de mídia especificado na consulta de mídia corresponder ao tipo de dispositivo que está sendo exibido e todas as expressões na consulta de mídia forem verdadeiras. Quando uma consulta de mídia é verdadeira, a folha de estilo ou as regras de estilo correspondentes são aplicadas, seguindo as regras normais em cascata.
Esta técnica responsiva pode ser utilizada com todos os nossos arquivos em um site mesmo que o conteúdo multimídia, para tornar nosso site mais prático e acessível a todos os dispositivos, então podemos tornar nossos vídeos também Responsivos, ou seja, autoajustáveis ou adaptáveis de acordo com o dispositivo de saída.
Para isso contamos com o FitVids.js, que é um plugin utilizado para tornar qualquer vídeo responsivo, ele se adaptará perfeita e automaticamente ao tamanho do container ou dispositivo de saída, algo muito prático para web design em termos de seu conteúdo para ser perfeitamente visualizado em telefones inteligentes e tablets.
Você deve incluir jQuery 1.7 ou posterior e FitVids.js no design de sua página da web e direcionar o contêiner de vídeo com fitVids ().
O uso é simples, basta chamar a função fitVids apontando um vídeo e o elemento é empacotado automaticamente com ume CSS para redimensionar deve ser aplicado.
Atualmente é compatível com os principais serviços como Youtube, Vimeo, Blip.TV ou Viddler
Podemos adicioná-lo ao wordpress com uma função, de modo que qualquer classe div .video seja redimensionada automaticamente.
}}}} add_action ('init', 'fitvids'); ?> var13 ->Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo