a meta viewport

Treinando transformações de elementos para aperfeiçoar a responsividade de sites já criados focamos nas modificações dos arquivos mas esquecemos aonde tudo começa, a meta viewport.

Os navegadores em smartphones tiveram que lidar com sites projetados com layouts de largura fixa para telas mais amplas. Por padrão, os navegadores para mobile assumiram que 980 pixels era a largura para a qual as pessoas estavam projetando, e eles não estavam errados.

Portanto, mesmo se você usasse um layout líquido, o navegador aplicaria uma largura de 980 pixels e, em seguida, dimensionaria a página da Web renderizada para a largura real da tela.

Se você estiver usando o design responsivo, precisará informar ao navegador para não fazer esse dimensionamento.

Você pode fazer isso com um elemento meta no cabeçalho da página da web:

<meta name="viewport" content="width=device-width, initial-scale=1">

Existem dois valores, separados por vírgulas.

O primeiro é largura=largura do dispositivo. Isso informa ao navegador para assumir que a largura do site é igual à largura do dispositivo, em vez de assumir que a largura do site é de 980 pixels.

O segundo valor é escala inicial=1. Isso informa ao navegador quanto ou quão pouco dimensionamento deve ser feito. Com um design responsivo, você não quer que o navegador faça qualquer dimensionamento.

O telefone à esquerda mostra a aparência do layout antes da metatag estar no lugar, quando comparado ao layout à direita.

Com esse elemento meta no lugar, suas páginas da web estão prontas para serem responsivas.

Esse artigo foi mais objetivo e vale lembrar a importância de dominar dois princípios cada vez mais determinantes na criação de layouts que é o mobile first e a responsividade. Espero que tenha gostado. Deixe seu aplauso e até o próximo artigo.

--

--

--

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
douglasabnovato

douglasabnovato

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

More from Medium

Explained to a 5 yr old: React Component Level State

Taking local storage values from one HTML and retrieving it on another!

code snippet fetching our data from the response from API. Gives us carbon emissions and flight distance based on airport input

“But It’s Against My Nature!” —

ClientServerOverview