Web Design Responsivo

Tamanho: px

Começar a partir da página:

Download "Web Design Responsivo"

Raíssa Amaro Bugalho
6 Há anos
Visualizações:

1 Web Design Responsivo O Design Responsivo ajusta-se automaticamente baseado no tamanho da tela do dispositivo de mídia que está sendo utilizado. Nós estudaremos como utilizar a do CSS3 utilizando o Modernizr. Passo 1 O layout web foi dividido em 3 partes horizontais: header (cabeçalho), main(principal) e footer(rodapé). O header (cabeçalho) foi dividido em 2 partes horizontais: logo e nav (menu de navegação) e da mesma forma Main foi dividido em Article e Sidebar. Código HTML <div id="header"> 1 Header <div id="logo">logo <div id="nav">links <div id="main"> 2 Main <div id="article">article <div id="sidebar">sidebar <div id="footer"> 3 Footer

2 Código CSS style.css *margin:0px;padding:0px padding:20px; overflow:auto; padding:10px; #footer padding:20px; clear:both #article,#sidebar min-height:250px;margin-bottom:20px;overflow:auto Passo 2 Agora montar a lista do menu com a tag <ul>. <div id="nav"> <ul> <li>link</li> <li>link</li> <li>link</li> </ul> CSS ul list-style:none; width:100% li

3 padding:4px; margin-bottom:5px; background-color:#ffffcc; text-align:center; color:#00000 Passo 3 768px Trabalhando com a resolução media minima de colunas com 768px only screen and (min-width: 768px) #article width:68%; #sidebar float:right; width:30%; #logo width:10%; #nav float:right; width:80%;

Passo 4 - @media 1140px Trabalhando com a resolução media mínima de colunas com 1140px CSS @media 1140px @media only screen and (min-width: 1140px)

4 Passo px Trabalhando com a resolução media mínima de colunas com 1140px only screen and (min-width: 1140px) padding:20px 40px 20px 40px; Passo 5 480px Trabalhando a tag Nav na resolução media mínima de colunas com only screen and (min-width: 480px) ul li

width:16%; padding:4px; margin-right:8px Modernizr Modernizr é uma library em JavaScript que detecta a disponibilidade de implementações nativas para a próxima geração de Tecnologias Web.

5 width:16%; padding:4px; margin-right:8px Modernizr Modernizr é uma library em JavaScript que detecta a disponibilidade de implementações nativas para a próxima geração de Tecnologias Web. Essas tecnologias são novos recursos que decorrem das especificações HTML5 e CSS3 em andamento. O Modernizer não suporta CSS in line. Código Final - HTML <!DOCTYPE html> <head> <meta charset="utf-8"> <title>responsive Design with CSS</title><meta content='width=device-width, initial-scale=1' name='viewport'/> <link rel="stylesheet" href="style.css"> </head> <body>  <div id="header"> <div id='logo'> <h2>header</h2> <div id='nav'> <ul> </ul>  <div id="main"> <div id='article'> <div class='content'> <h1>responsive Design with CSS</h1> <h3>resize your browser and test with different resolutions.</a> </h3> <table>

6 <tr><td 1140px</td><td bgcolor='#333;' style='width:40px;'> </td></tr> <tr><td 768px</td><td bgcolor='#006699'> </td></tr> <tr><td 480px</td><td bgcolor='#cc0000'> </td></tr> <tr><td 300px</td><td bgcolor='#690'> </td></tr> </table> <div id='sidebar'> <div class='content'> Side Block  <div id="footer"> <h2>footer</h2> <iframe src=" frameborder="0" scrolling="no" height="0"></iframe> </body> </html> Código Final style.css *margin:0px;padding:0px bodyfont-family:arial background-color:#690; border-bottom:2px solid #333; padding:20px; overflow:auto; color:#fff; padding:10px 10px 10px 10px; #footer min-height:10px; background-color:#dedede; border-top:2px solid #333;

7 padding:20px; clear:both #article,#sidebarbackground-color:#dedede; min-height:400px;marginbottom:20px;overflow:auto.contentpadding:20px ullist-style:none;width:100% only screen and (min-width: 480px) background-color:#cc0000; ul liwidth:16%;padding:4px;margin-right:8px padding:10px 20px 10px only screen and (min-width: 768px) background-color:#006699; #article width:68%; #sidebar float:right; width:30%; #logo width:10%; #nav float:right; width:80%; ulfloat:right liwidth:17%;padding:4px;margin-right:8px

8 padding:20px 30px 20px only screen and (min-width: 1140px) background-color:#333; padding:20px 40px 20px 40px;

Documentos relacionados

Folhas de Estilo em Cascata CSS

Folhas de Estilo em Cascata CSS Estilização Efeitos Animações Micro interações Estrutura: seletor { regra: valor ; regra: valor ; regra: valor ; h1 { color: red ; background: white; padding: 15px