{"id":435,"date":"2020-07-01T14:14:43","date_gmt":"2020-07-01T17:14:43","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=435"},"modified":"2022-12-09T08:45:46","modified_gmt":"2022-12-09T11:45:46","slug":"web-design-responsivo-em-html","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/web-design-responsivo-em-html\/","title":{"rendered":"Web design responsivo em HTML"},"content":{"rendered":"

Web design responsivo \u00e9 sobre a cria\u00e7\u00e3o de p\u00e1ginas da web que ficam bem em todos os dispositivos!<\/p>\n

Um web design responsivo ser\u00e1 ajustado automaticamente para diferentes tamanhos de tela e viewports.<\/p>\n

O que \u00e9 Web Design Responsivo?
\nO Web design responsivo \u00e9 sobre o uso de HTML e CSS para redimensionar, ocultar, reduzir ou ampliar automaticamente um site, para torn\u00e1-lo bom em todos os dispositivos (desktops, tablets e telefones):<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Configurando a janela de exibi\u00e7\u00e3o<\/strong>
\nPara criar um site responsivo, adicione a seguinte <meta><\/code> tag a todas as suas p\u00e1ginas da web:<\/p>\n

Exemplo<\/strong>
\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/p>\n

 <\/p>\n

Isso definir\u00e1 a janela de visualiza\u00e7\u00e3o da sua p\u00e1gina, que fornecer\u00e1 ao navegador instru\u00e7\u00f5es sobre como controlar as dimens\u00f5es e a escala da p\u00e1gina.<\/p>\n

 <\/p>\n

Imagens responsivas<\/strong>
\nImagens responsivas s\u00e3o imagens que se adaptam perfeitamente a qualquer tamanho de navegador.<\/p>\n

Usando a propriedade width<\/strong>
\nSe a widthpropriedade CSS estiver definida como 100%, a imagem responder\u00e1 e aumentar\u00e1 e diminuir\u00e1 a escala:<\/p>\n

<\/p>\n

<img src=”imagem.jpg” style=”width:100%;<\/strong>“><\/p>\n

Teste abaixo diminuindo a tela<\/p>\n

<h1>aumente e diminua a p\u00e1gina<\/h1>\r\n<img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/tutorial-de-html-introducao-300x133.png\" style=\"width:100%;\"><\/pre>\n


<\/center>\n
Observe que no exemplo acima, a imagem pode ser dimensionada para ser maior que o tamanho original. Uma solu\u00e7\u00e3o melhor, em muitos casos, ser\u00e1 usar a max-width propriedade.<\/p>\n
Usando a propriedade max-width<\/strong><\/p>\n
Se a max-width propriedade estiver definida como 100%, a imagem ser\u00e1 reduzida, se necess\u00e1rio, mas nunca ser\u00e1 maior que o tamanho original:<\/p>\n
<<\/span>img\u00a0src=”imagem.jpg”<\/span>\u00a0style=”max-width:100%;height:auto;<\/strong>“<\/span><\/span>><\/span><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<\/head>\r\n<body>\r\n\r\n<h2>Responsive Image<\/h2>\r\n<p>\"max-width:100%\" prevents the image from getting bigger than its original size. However, if you make the browser window smaller, the image will still scale down.<\/p>\r\n<p>Resize the browser window to see the effect.<\/p>\r\n\r\n<img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/tutorial-de-html-introducao-300x133.png\" style=\"max-width:100%;height:auto;\">\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Mostrar imagens diferentes, dependendo da largura do navegador<\/strong><\/p>\n
O <picture><\/code>elemento HTML permite definir imagens diferentes para diferentes tamanhos de janelas do navegador.<\/p>\n
Redimensione a janela do navegador para ver como a imagem abaixo muda dependendo da largura:<\/p>\n
    \n
  • foi colocado imagens aleat\u00f3rias, mas coloque a mesma imagem com resolu\u00e7\u00f5es diferentes.<\/li>\n<\/ul>\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<\/head>\r\n<body>\r\n\r\n<h2>Show Different Images Depending on Browser Width<\/h2>\r\n<p>Resize the browser width and the image will change at 600px and 1500px.<\/p>\r\n\r\n<picture>\r\n  <source srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/estrutura-basica-de-um-documento-javascript-1-300x169.jpg\" media=\"(max-width: 600px)\">\r\n  <source srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/3-temas-bons-para-criar-um-site-de-ensino-a-distancia-ead-no-wordpress-300x200.jpg\" media=\"(max-width: 1500px)\">\r\n  <source srcset=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/estrutura-basica-de-um-documento-javascript-1-300x169.jpg\">\r\n  <img src=\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/12-scripts-interessantes-e-uteis-para-usar-no-wordpress-300x118.jpg\" alt=\"Flowers\" style=\"width:auto;\">\r\n<\/picture>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


    <\/center>\n
     <\/p>\n
    Tamanho do texto responsivo<\/strong>
    \nO tamanho do texto pode ser definido com uma unidade “vw”, o que significa “largura da janela de exibi\u00e7\u00e3o”.<\/p>\n
    Dessa forma, o tamanho do texto seguir\u00e1 o tamanho da janela do navegador:<\/p>\n
    \"\"<\/p>\n
     <\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<\/head>\r\n<body>\r\n\r\n<h1 style=\"font-size:10vw;\">Texto responsivo<\/h1>\r\n\r\n<p style=\"font-size:5vw;\">Redimensione a janela do navegador para ver como o tamanho do texto \u00e9 dimensionado.<\/p>\r\n\r\n<p style=\"font-size:5vw;\">Use a unidade \"vw\" ao dimensionar o texto. 10vw definir\u00e1 o tamanho para 10% da largura da janela de exibi\u00e7\u00e3o.<\/p>\r\n\r\n<p>Viewport \u00e9 o tamanho da janela do navegador. 1vw = 1% da largura da janela de visualiza\u00e7\u00e3o. Se a janela de visualiza\u00e7\u00e3o tiver 50 cm de largura, 1vw ser\u00e1 de 0,5 cm.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


    <\/center>\n
    Consultas de m\u00eddia<\/strong>
    \nAl\u00e9m de redimensionar texto e imagens, tamb\u00e9m \u00e9 comum usar consultas de m\u00eddia em p\u00e1ginas da web responsivas.<\/p>\n
    Com consultas de m\u00eddia, voc\u00ea pode definir estilos completamente diferentes para diferentes tamanhos de navegador.<\/p>\n
    Exemplo: redimensione a janela do navegador para ver se os tr\u00eas elementos div abaixo ser\u00e3o exibidos horizontalmente em telas grandes e empilhados verticalmente em telas pequenas:<\/p>\n
    \"\"<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n* {\r\n  box-sizing:border-box;\r\n}\r\n\r\n.left {\r\n  background-color:#2196F3;\r\n  padding:20px;\r\n  float:left;\r\n  width:20%; \/* The width is 20%, by default *\/\r\n}\r\n\r\n.main {\r\n  background-color:#f1f1f1;\r\n  padding:20px;\r\n  float:left;\r\n  width:60%; \/* The width is 60%, by default *\/\r\n}\r\n\r\n.right {\r\n  background-color:#4CAF50;\r\n  padding:20px;\r\n  float:left;\r\n  width:20%; \/* The width is 20%, by default *\/\r\n}\r\n\r\n\/* Use a media query to add a break point at 800px: *\/\r\n@media screen and (max-width:800px) {\r\n  .left, .main, .right {\r\n    width:100%; \/* The width is 100%, when the viewport is 800px or smaller *\/\r\n  }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Consultas de m\u00eddia<\/h2>\r\n<p>Redimensione a janela do navegador.<\/p>\r\n\r\n<p>Certifique-se de atingir o ponto de interrup\u00e7\u00e3o em 800px ao redimensionar esse quadro.<\/p>\r\n\r\n<div class=\"left\">\r\n  <p>Left Menu<\/p>\r\n<\/div>\r\n\r\n<div class=\"main\">\r\n  <p>Main Content<\/p>\r\n<\/div>\r\n\r\n<div class=\"right\">\r\n  <p>Right Content<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


    <\/center>\n
     <\/p>\n
    Um pouco sobre Bootstrap<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <title>Bootstrap Example<\/title>\r\n  <meta charset=\"utf-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n  <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\">\r\n  <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.0\/jquery.min.js\"><\/script>\r\n  <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n  <div class=\"jumbotron\">\r\n    <h1>Minha primeira p\u00e1gina de inicializa\u00e7\u00e3o<\/h1>\r\n    <p>Redimensione esta p\u00e1gina responsiva para ver o efeito!<\/p> \r\n  <\/div>\r\n  <div class=\"row\">\r\n    <div class=\"col-sm-4\">\r\n      <h3>Coluna 1<\/h3>\r\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...<\/p>\r\n      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...<\/p>\r\n    <\/div>\r\n    <div class=\"col-sm-4\">\r\n      <h3>Coluna 2<\/h3>\r\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...<\/p>\r\n      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...<\/p>\r\n    <\/div>\r\n    <div class=\"col-sm-4\">\r\n      <h3>Coluna 3<\/h3>        \r\n      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...<\/p>\r\n      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...<\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


    <\/center>\n
     <\/p>\n
    \n  Ap\u00f3s clicar em Copy ⇗
    O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n