Adaptive web design provides different web pages for different devices

with the popularity of 3G, more and more people use their mobile phones to surf the internet.

mobile devices are becoming more common than desktop devices, becoming the most common terminal for accessing the internet. Thus, web designers have to face a difficult question: how can they render the same page on different sizes of devices?

phones have relatively small screens, usually below 600 pixels wide; the screen width of PC is typically above 1000 pixels (the current mainstream is 1366× 768); some also reach 2000 pixels. The same content, to be on a very different screen, showing satisfactory results, is not an easy task.

the solution to many web sites is to provide different pages for different devices, such as providing a mobile version, or iPhone / iPad version. This does guarantee the effect, but it’s troublesome, and several versions should be maintained, and if a site has multiple portal (portals), it will greatly increase the complexity of the architecture design.

then, it was long ago that anyone could imagine a design that would be universally applicable, so that the same page would automatically fit into different sizes of screens and automatically adjust the layout according to the screen width. (layout)

 

, "adaptive web design" concept

in 2010, Ethan Marcotte proposed the term "Responsive Web Design", which refers to the web design that can automatically recognize the width of the screen and adjust accordingly.

he made an example of the six characters in the adventures of Holmes. If the screen width is greater than 1300 pixels, 6 pictures are placed side by side in a row.

 

if the screen is between 600 and 1300 pixels, the 6 pictures are divided into two lines.

 

if the screen is between 400 and 600 pixels, the navigation bar moves to the head of the page.

 

if the screen width is below 400 pixels, the 6 picture is divided into three lines. #p# subtitle #e#

 

There are more examples of this on

mediaqueri.es.

there is also a test widget available on a web page