Sua página web deve ser bom, e ser fácil de usar, independentemente do dispositivo.
O que é Web Design Responsive?
Web Design Responsive faz sua página web ficam bem em todos os dispositivos (desktops, tablets, and phones) .
Web Design Responsive é sobre o uso de CSS e HTML para redimensionar, esconder, encolher, ampliar ou mover o conteúdo para torná-lo ficar bem em qualquer tela:
Crie seu próprio projeto Responsive
Uma maneira de criar um design responsivo, é criá-lo:
Exemplo
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html> Tente você mesmo " usando W3.CSS
Outra maneira de criar um design responsivo, é usar uma folha de estilo ágil, como W3.CSS
W3.CSS torna mais fácil para desenvolver sites que parecem bom em qualquer tamanho; desktop, laptop, tablet ou telefone:
W3.CSS Demonstração
Redimensionar desta página responsiva!
Londres
Londres é a cidade capital da Inglaterra.
É a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 13 milhões de habitantes.
Paris
Paris é a capital da França.
A área de Paris é um dos maiores centros populacionais na Europa, com mais de 12 milhões de habitantes.
Tóquio
Tóquio é a capital do Japão.
É o centro da área maior de Tokyo, ea área metropolitana mais populosa do mundo.
Exemplo
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<body>
<div class="w3-container w3-orange">
<h1>W3.CSS Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html> Tente você mesmo " Para saber mais sobre W3.CSS, leia o nosso Tutorial W3.CSS .