Scaling of responsive web pictures

In fact, there is a one-sided misunderstanding of the response page: The page element is not fixed width, according to the percentage of automatic scaling, to achieve a unified display of different dimensions of the viewport; Responsive web pages, as the name implies, is this understanding. In fact, responsive web development belongs to the HTML5, and is designed to adapt to different terminals, and according to the terminal type to adapt to different functional modules and performance style, so the above understanding is one-sided, because the adaptation of different functional modules, of course, this also intangible increase the complexity of the original page, Maybe you want to adapt to the 3 terminal, but must design three sets of PSD, write three sets of style sheets, there is an additional interactive experience, but it is worthwhile, so that your application in a variety of terminals can be perfectly displayed, and without losing the user experience, in the product line unchanged, can meet more user needs, bring a different experience.

A preliminary study of responsive web--the basic approach of reactive development in the flower building, here is a big focus, the image zoom. What we want to do is: PC, IPad, mobile three terminal quality response pictures.

Page Header added <meta name= "viewport" content= "width=device-width,initial-scale=1,maximum-scale=1"/> The width we want to fit is the screen size of the phone. Referring to Http://screensiz.es/phone can be seen, to the picture on the phone shelf-quality display, picture width should not be less than 380 to 400, then the style of the picture width:100%, max-width:100% is very good appearance But this size is only used for mobile phones, the other terminal, the image will inevitably enlarge the deformation;

In fact, is not the response to scale a picture, as a front-end, this is not a difficult thing, to a simple violent way: the unified picture size on the PC, the other terminal press max-width:100% to zoom, or on the mobile phone as a standard, remove width:100% But there is a downside to both: the consumption of the former on the mobile side will be greatly increased, the latter is difficult to meet complex scenarios.

Here's how media query looks:

Let me first display the picture as a background, respectively, suitable for three terminals;

@media only Screen (max-device-width:350) {Background:url (mobile.png) no-repeat;background-size:100% 100%;}

@media only screen (min-device-width:500) and (max-device-width:1024) {Background:url (pad.png) no-repeat; background-size:100% 100%;}

@media only screen (min-device-width:1024) and (max-device-width:1024) {Background:url (pc.png) no-repeat; background-size:100% 100%;}

Yes, so you will prepare three versions of the pictures and styles for the display of a picture, but this is not a difficult task here, do not worry about you in a terminal will be 3 kinds of graphs are loaded, these 3 media equivalent to 3 if statements, only to meet the criteria will be executed in the style.

HTML5 is cool, front-end is cool, as a small front end (nickname: Flower full Floor), road resistance and long, words, silly humble opinion, in this share, and June Mutual encouragement!

Scaling of responsive web pictures