Responsive Web Design philosophy is to design and develop a page should be an appropriate response and adjusted according to user behavior and device environment (system platform, screen size, screen orientation, etc.). Specific practices by many, including elastic grid and layout, images, CSS media query usage and so on. Whether you are using a notebook or iPad, our page should be able to automatically switch the resolution, picture size and associated scripting capabilities, so as to adapt to different devices; in other words, the page should have the ability to automatically respond to the user's device context. Thus, we do not have to make a special version of the design and development of new equipment constantly coming up.
Responsive Web Design concept
Adjust the resolution
Part of the solution: All flexible
Now, we can design and develop responsive ideas to make the page more "flexibility" of the. Size Image can be automatically adjusted; page layout will no longer be destroyed. Although never the perfect solution, but it gives us more options. No matter how the device user to switch the screen orientation, or from the desktop to the iPad screen browser, the page will be truly flexible.
<H1 id = "logo">
<a href="#"> <img src = "site / logo.png" alt = "The Baker Street Inquirer" /> </a>
Where, <h1> element uses the illustration as a background, the text portion of the picture remains aligned with the background.
The examples show how little responsive Web design ideas. But this is not enough to avoid a small effort to change the entire layout of the small size of the window is too narrow or too short, and eventually become a small logo text to be difficult to identify, much of the background image will be cropped.