Responsive Web Design: The Web product RWD concept

650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M02/83/C0/wKiom1d7bQaRT70AAAB83hMF6H4807.jpg-wh_500x0-wm_3 -wmp_4-s_553533640.jpg "title=" 1.jpg "alt=" Wkiom1d7bqart70aaab83hmf6h4807.jpg-wh_50 "/>

RWD (Responsive Web Design)

Can be called adaptive web Design, responsive web design, responsive web design, etc., is a Web page content can be adjusted with the width of different devices to adjust the picture rendering technology, so that users can not need to zoom in the way to browse the Web, greatly enhance the screen's accessibility and the use of interface affinity However, this is becoming more and more important for today's increasingly attention to action business.

In recent years, with the popularity of mobile devices (smart phones, tablets) and the increasing use of mobile Internet services, the standard of traditional Web pages has not been able to meet the needs of these devices to present, especially the animation produced by Flash, limited by the operation of mobile devices under the constraints of insufficient computing power, There are no mobile devices available to go directly to the Flash production page. Although it can be viewed through some special app software, the convenience is greatly reduced.

　　And how is RWD achieved?

Mainly in the HTML5 standard and CSS3 media queries to achieve.

In the HTML5 standard, we can specify the width of the page can be displayed according to the viewing width of the device, and then use the CSS3 media queries to set different widths using different CSS to render the page. Therefore, when designing web pages, designers must write different CSS files for different widths of images for the browser to read.

　　Benefits of RWD:

1. The same set of original code can be used to compose CSS, can reduce the time of page re-production.

2. Can be set for different resolutions at the same time, increase the usability of the page.

3. The search engine will not affect the inclusion, not affect the results of the SEO.

4. Development time can be much faster than app.

5. The learning threshold is lower, for those who have already engaged in web design, this technology is just a technology built on the original DIV+CSS, so it is relatively easy to learn.

　　The disadvantages of RWD:

1. Because a CSS file that is placed in multiple resolutions on the same page will increase the amount of page transfers, the load time will also be extended.

2. If the screen at various resolutions needs to be following behalf, the time of making the layout will be greatly increased.

3. You can't provide powerful features like apps or cool drag-and-pull effects.

4. The development time course is more time than traditional Web pages.

The above provides an analysis of the pros and cons of RWD.

Finally, before you can experience the functionality of RWD, there is one of the most important basic elements, which is the degree of support for browsing. Since RWD is built on the basis of CSS3, it is also necessary to support CSS3 's browser to support RWD, and the following are the versions supported by the major browsers:

? Internet Explore 9 or more

? Chrome, Firefox, and opera use Automatic Updates to the latest version

Although some people have written JS to allow the following version of IE8 to support the CSS3 syntax, but the current support is poor, and IE8 users are still declining, so using the new browser is the best way to truly experience RWD.

This article is a simple introduction to the basic concepts of RWD, and analyzes its pros and cons, so that people who are interested in using RWD have more knowledge of this technology.

This article is from the "first to a cup of Java press yajing" blog, please be sure to keep this source http://maybeone.blog.51cto.com/11734094/1796003

Responsive Web Design: The Web product RWD concept