RMFAIS
RESPONSIVIDADE
E DESIGN RESPONSIVO
No desenvolvimento
para Web, responsividade refere-se a criação de páginas de
Internet que se ajustam, automaticamente, a diferentes tipos de
dispositivos, proporcionando ao internauta uma melhor visualização
dos conteúdos. O design responsivo é, portanto, um conjunto de
recursos que possibilitam implementar a responsividade.
Dentre tais
recursos, o principal deles é <meta name=viewport
content=width=device-width>, uma informação de cabeçalho
que faz o navegador(Browse) redimensionar os conteúdos na tela de
acordo com a resolução do dispositivo que está sendo utilizado
pelo internauta.
Um outro recurso
importante, é a utilização da linguagem JavaScript, para
reajustar os tamanhos dos componentes da página, por meio de
verificações lógicas, conforme exemplo que segue:
<script>
if(screen.width<1000)
document.write("<DIV style='background-color:gold;
width:100%; height:600px;'>");
else
document.write("<DIV style='background-color:gold;
width:70%; height:600px;'>");
</script>
|
O código seguinte,
é um exemplo de página responsiva que se ajusta a diferentes tipos
de dispositivos:
Para executar o código abaixo você terá que autorizar popup
Este pequeno artigo
não têm por objetivo fazer um aprofundamento sobre design
responsivo, ele é apenas uma sugestão básica de como criar uma
página responsiva. Para criação de páginas manualmente(bloco de
notas), aconselha-se fazer uma estudo mais aprofundado sobre a meta
tag viewport, pois ela possui diversas sintaxes. Vale lembrar
que, a maioria dos frameWorks e templates destinados a criação de
sites estão preparados para gerar códigos responsivos.
ATIVIDADES
1) O que vem a ser
uma página web responsiva?
2) Que tipos de
recursos podem ser utilizados para implementar responsividade?
3) Qual a
importância da responsividade na criação de páginas web?
Publicado em 13 de
Maio de 2018 – Prof. Roni Márcio Fais