Diseño Web Sensitivo

HTML Responsive Web Design

Su página web debe verse bien y ser fácil de usar independientemente del dispositivo. ¿Cuál es el truco de diseño?

El diseño web sensitivo hace que su página web se ve bien en todos los dispositivos (equipos de escritorio, tabletas y móviles).

El diseño web es sobre el uso de CSS y HTML para cambiar el tamaño, apariencia, reducir, ampliar, o mover el contenido para que se vea bien en cualquier pantalla:

Crea tu primer Responsive Design: Tres simples bloques de texto y el título de página

<!DOCTYPE html>

<head>

<style>

.city {

float: left;

margin: 10px;

padding: 10px;

width: 300px;

height: 300px;

border: 1px solid black;

}

</style>

</head>

<body>

<h1>Responsive Web Design Demo</h1>

<h2>Resize this responsive page!</h2>

<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>

<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>

<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>

<h2>View Source</h2>

<p>View the source code to see how this page was built.</p>

</div>

</body>

</html>

Ver online

--------------------------------------------------------

Segunda forma - Usando CSS3

Otra forma de crear un diseño de respuesta, es utilizar una hoja de estilos de respuesta, al igual que .CSS3

CSS3 hace que sea fácil de desarrollar sitios que se ven bien en cualquier tamaño; escritorio, portátil, tableta o teléfono:

Ver online

<!DOCTYPE html>

<html>

<body>

<p>Resize this responsive page!</p>

</div>

<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>

<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>

<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>

What is Responsive Web Design?

Responsive web design makes your web page look good on all devices.

Responsive web design uses only HTML and CSS.

Responsive web design is not a program or a JavaScript.

Diseños para una mejor experiencia de usuarios

Las páginas web pueden ser vistas usando diferentes dispositivos: ordenadores de sobremesa, tabletas y celulares. En todos ellos debe verse bien y poder utilizar sus funcionalidades.

Las páginas web no deben dejar de lado parte de la información para adaptarse a dispositivos pequeños, sino adaptar su contenido a cualquier dispositivo:

Desktop Tablet Phone

Se llama diseño web sensible cuando se utiliza CSS y HTML para cambiar el tamaño, piel, reducir, ampliar, o mover el contenido para que se vea bien en cualquier pantalla.

CSS responsive

http://www.w3schools.com/w3css/w3css_responsive.asp

W3.CSS Built-In Responsiveness

Responsive Classes

W3.CSS includes a responsive, mobile first grid system to handle your layout:

W3.CSS's grid system is responsive, and the columns will re-arrange automatically depending on the screen size:

« Previous

1/2

1/4

3/4

1/4

1/2

1/4

1/3

1/2

1/3

1/4

1/3

1/4

1/3

2/3

Next Chapter »

1/3

50px

rest

1/4

rest

1/2

1/4

1/2

1/4

100px

rest

45px

Responsive Rows

Responsive classes must be placed inside a w3-row to be fully responsive.

Class

w3-row

w3-row-padding

Description

Defines a padding-less container for responsive classes.

Defines a padded container for responsive classes.

The w3-half Class

The width of the w3-half class is 1/2 of the parent element (style="width:50%").

On small* screens it resizes to 100%.

Example

</div>

</div>

Try It Yourself »

The w3-third Class

The width of the w3-third class is 1/3 of the parent element (style="width:33.33%").

On small* screens it resizes to 100%.

Example using w3-third

<h2>w3-third</h2>

</div>

<h2>w3-third</h2>

</div>

<h2>w3-third</h2>

</div>

Try It Yourself »

The w3-twothird Class

The width of the w3-twothird class is 2/3 of the parent element (style="width:66.66%").

On small* screens it resizes to 100%.

Example using w3-twothird

<h2>w3-twothird</h2>

</div>

<h2>w3-third</h2>

</div>

Try It Yourself »

The w3-quarter Class

The width of the w3-quarter class is 1/4 of the parent element (style="width:25%").

On small* screens it resizes to 100%.

Example using w3-quarter

<h2>w3-quarter</h2>

</div>

<h2>w3-quarter</h2>

</div>

<h2>w3-quarter</h2>

</div>

<h2>w3-quarter</h2>

</div>

Try It Yourself »

The w3-threequarter Class

The width of the w3-threequarter class is 3/4 of the parent element (style="width:75%").

On small* screens it resizes to 100%.

Example using w3-threequarter

<h2>w3-threequarter</h2>

</div>

<h2>w3-quarter</h2>

</div>

Try It Yourself »

Combinations

w3-half

w3-third

w3-twothird

w3-quarter

w3-third

w3-half

w3-quarter

w3-third

w3-quarter

w3-half

w3-quarter

w3-half

w3-quarter

Nested Rows

Example: w3-half Inside w3-half

<p>This is a paragraph.</p>

</div>

<p>This is a paragraph.</p>

</div>

<p>This is a paragraph.</p>

</div>

<p>This is a paragraph.</p>

</div>

Try It Yourself »

Columns Using Rest

The w3-rest class will use what's left of the grid column.

Example using w3-rest

</div>

Try It Yourself »

Columns Using Percent

You can also use the CSS width property to determine a specific width of the columns.

Example using percent

</div>

Try It Yourself »

The w3-content Class

The w3-content class defines a container for fixed size centered content. Use the CSS max-width property to override the default width (980px).

Example

page content...

</body>

Try It Yourself »

Difference between w3-row and w3-row-padding

The w3-row class defines a padded-less container, while the w3-row-padding class adds a 8px left and right padding to each column:

w3-row:

w3-row-padding:

Example

</div>

</div>

Try It Yourself »

12 Column responsive fluid grid

W3.CSS also supports an advanced 12 column responsive fluid grid.

w3-third

w3-threequarter

I am 150px

20%

I am the rest

60%

w3-twothird

20%

w3-quarter

Page updated

Google Sites

Report abuse