Responsive and adaptive (responsive design and Adaptive design)

The first two days to do a few mobile phone-side pages, originally with CSS3 @media but because it is not very understanding, debugging several times unsuccessful. Because time is more rush, in order to achieve the final page effect, I use JS to get the size of the screen to control the final font size.

After the idle I checked the information, more in-depth to understand what is the response. found that my final page, can only be called self-adaptation, not called the response. there is no actual problem with the page (after checking the data shows that it seems that the adaptive response is more perfect) but my original intention is to do the response, in response to the problem of temporary self-adaptation.

The basic concepts of the response are:

　　In short, a website can be compatible with multiple terminals-not a specific version for each terminal. --Source (Baidu)

(using CSS's media query technology, with the fluid layout (fluid grids) and the same adaptive image/video and other resource materials. All of this can be done with HTML and CSS. In general, the response tends to change the appearance of elements only, without drastically altering the content.   Jeffrey Zeldman concludes that we define adaptation as everything that can be used to optimize the visual experience for a variety of resolutions and device performance. --Source (answer from the above)

Self-adapting explanations:

　　Adaptive Design is the title of Aaron Gustafson's book. He thinks that adaptive in addition to the responsive CSS media query technology, but also to use Javascript to manipulate HTML to better adapt to mobile device capabilities. Adaptive has the possibility of subtracting the content from the mobile user and subtracting the functionality. Adaptive can be optimized on the server side to send the optimized content to the terminal. Adaptive usually involves another word "progressive enhancement".
Progressive enhancement: Starting with the design of the lowest-end, lowest-resolution device, gradually adding functionality and effect to higher-order devices. (In other words, it's equivalent to subtracting a function from a mobile device.)　

There is another saying:

Responses generally need to start at the beginning of the web design (usually with the mobile first strategy), so the response of the old site is likely to be completely rebuilt. Adaptive, however, uses the retention of the existing desktop version for targeted optimization (adaptation) for smaller resolutions, which is important for many older sites because the cost of refactoring is too high.

Why my @media screen is having problems, I'm still looking for a summary of the problem. I'm probably having a problem with the screen size judgment. Have recently done a test to make a complete @media screen some size judgments. and deepen your understanding of screen size.

Responsive and adaptive (responsive design and Adaptive design)