Article introduction of Wulin.com (www.vevb.com): Responsive Web Design.
With the popularity of 3G, more and more people use their mobile phones to surf the Internet.
Mobile devices are surpassing desktop devices and becoming the most common terminal to access the Internet. So, web designers have to face a difficult problem: how can they present the same web page on devices of different sizes?
The screen of a mobile phone is relatively small, usually below 600 pixels; the screen width of a PC is generally above 1,000 pixels (currently the mainstream width is 1,366×768), and some even reach 2,000 pixels. It is not easy to have satisfactory results on screens of different sizes.
The solution to many websites is to provide different web pages for different devices, such as providing a mobile version, or iPhone/iPad version. This ensures the effect, but it is quite troublesome. It requires maintenance of several versions. Moreover, if a website has multiple portals, it will greatly increase the complexity of the architecture design.
Therefore, some people have long imagined whether it can be designed at one time and generally applicable to the same web page automatically adapts to screens of different sizes, and automatically adjusts the layout according to the screen width?
1. The concept of adaptive web design
In 2010, Ethan Marcotte proposed the term Responsive Web Design, which refers to a web design that can automatically recognize screen width and make corresponding adjustments.
He made an example of the portraits of the six protagonists of The Adventures of Sherlock Holmes. If the screen width is greater than 1300 pixels, 6 pictures are in a row side by side.
If the screen width is between 600 pixels and 1300 pixels, the 6 pictures are divided into two lines.
If the screen width is between 400 pixels and 600 pixels, the navigation bar moves to the head of the page.
If the screen width is below 400 pixels, 6 pictures are divided into three lines.
mediaqueri.es have more examples like this above.
There is also a test widget here, which can display the test effects of screens with different resolutions on a web page at the same time. I recommend installing it.