目录
- 1 What is responsive web design
- 2 Elements of responsive web design
- 3 The Challenges of Responsive Web Design
What is responsive web design
Responsive web design or adaptive web design, responsive web design, corresponding web design. Is a technical approach to web design that allows websites to read and navigate across multiple browsing devices, from desktop computer monitors to mobile phones or other mobile product devices, while reducing zooming, panning, and scrolling.
Ethan Marcotte coined the term Responsive Web Design (RWD) in his article on A List Apart. He described the theory and practice of responsive web design in his short book on the subject in 2011. Responsive design was ranked second by top magazine web design trends in 2012 (progressive enhancement was first).
Elements of responsive web design
Websites designed with RWD use CSS3 Media queries, an extension to media rules, as well as streaming scale-based grids and adaptively sized images to accommodate devices of different sizes:
- Media queries allow web pages to use different CSS style rules depending on the characteristics of the device on the site being visited. The most common is the width of the browser.
- The streaming grid concept requires page elements to be resized using relative units such as percentages or typography, rather than absolute units such as pixels or points.
- Flexible images are also resized in relative units (up to 100%) to prevent them from appearing outside the elements that contain them.
The Challenges of Responsive Web Design
Luke Wroblewski summarized some of the challenges in RWD and mobile design, and created a catalog of multi-device layout patterns. He proposed that, rather than a pure RWD approach, Device Experience or RESS (Responsive Web Design with Server Side Components) can provide a more optimized user experience for mobile devices . Server-side "dynamic CSS" implementations of stylesheet languages such as Sass can be part of this approach.
One problem with RWD is that banner ads and videos are not streaming. However, search ads and (banner) display ads support specific device platform goals and provide different ad size formats for desktop, smartphone, and basic mobile devices. You can use different landing page URLs for different platforms, or you can use AJAX to display different ad variations on one page.
