preface

Recently the project is busy, busy into a dog, has been working overtime overtime, people are going to waste ~

Remember some time ago to write a SEO website concept, because before has been this thing pit, and pit afraid ~ this is not, the recent leadership said, this website is adaptive, not responsive, to change! (Why didn’t we mention this when we first started the project?)

What do you mean reactive? (Please forgive the front small white I) adaptive can understand, simple description, let the same page automatically adapt to different screen sizes, according to the screen width, automatically adjust the layout ~ but what is responsive ghost?

A picture

After looking at it for a long time, I feel that a picture can understand the difference:

Basic concept

Wikipedia:

Baidu Baike:

According to Wikipedia, responsive and adaptive are the same, there’s no separate distinction, they’re both RWD; But in Baidu Baike, responsive is RWD, adaptive is AWD, but there is no difference between the two;

However, combining Wikipedia and Baidu Encyclopedia, the definition of responsiveness can be basically considered as follows:

Responsive web design is the ability of a website to accommodate multiple terminalsCopy the code

And the definition of adaptive is:

Adaptive layout only focuses on implementing the layout on mobile devices, aiming to achieve exactly the same implementation on all mobile devicesCopy the code

From these two concepts, a situation can be obtained:

Adaptive effects are a subset of responsive effectsCopy the code

In fact, it is; Adaptive design is mainly to set the width for different resolutions, using @media to query the screen width, but this does not mean that responsive can not set a fixed width, responsive is a CSS can maintain the same interface at any screen resolution;

RWD&AWD:

  • Responsive Web Design: The same SET of HTML/CSS application in different terminals, so that both large and small screens can have a better experience

    • Fluid Grid percent-width layout
    • Media Query CSS responds to conditions such as window widths to implement different styles

  • Adaptive Web Design: Different terminals can output different HTML/CSS/JS through server-side scripts, so as to further improve the loading speed and smooth experience of mobile terminals on the basis of maintaining a perfect large-screen experience.

Implications of responsive design and adaptive layout

1, responsive design is simply a website compatible with multiple terminals, rather than a specific version for each terminal;

2, adaptive layout refers to the new web page design methods and technologies that can make the web page adaptive display on different sizes of terminal devices. It can be understood that the same page is displayed on devices of different sizes, so that the same page ADAPTS to screens of different sizes, and the layout is automatically adjusted according to the screen size. Responsive design:

Advantages & disadvantages between the two

1, responsive web design advantages: fluid grid site suitable for responsive web design. 1) strong flexibility, can adapt to different resolutions of equipment 2) convenient and fast to solve the problem of multi-device display adaptation 3) save a lot of controls, but also save a lot of efforts to establish and maintain

2, adaptive web design advantage: fixed breakpoint site suitable for adaptive web design. 1) It’s cheaper to implement and easier to test and 2) Adaptive layout makes the design more manageable because it only needs to consider a few states

3, the disadvantages of adaptive website and responsive website mobile site can not be completely consistent with the CONTENT of PC site, and the workload is heavy, adaptive mobile site often use different subdomain name or directory jump, for optimization of weight dispersion, visitor browsing experience is still defective. Responsive network design is often limited in style, difficult to achieve complex framework structure, complex production process, high code compatibility requirements.

Development difficulty comparison

Adaptive web sites are complex to develop (adaptive control of different screens) and simple (independent of PC), but easy to maintain and debug (only event handling on mobile).

Responsive web sites are relatively simple to develop (just adjust by media query) and complex (well coupled with PC web elements), but not easy to debug and maintain (bound to mobile and mobile processing events).

Page performance Comparison

Adaptive sites have only a mobile layout and style (less content), and are immediately displayed when downloaded to the browser, so performance is fast.

Responsive websites not only have the layout and style of the mobile terminal, but also the layout and style of the PC (with a lot of content). After downloading to the browser, the page layout is adjusted and then displayed, so the performance is slow.

PS: Responsive sites can also improve performance by loading different media query styles for the screen and selectively loading resources. But performance is still not as good as adaptive sites.

User Experience Comparison

Responsive websites ensure the consistency of PC and mobile terminals, streaming layout; Adaptive web sites ensure a more mobile-friendly experience.

SEO is

Adaptive sites are not easy to aggregate site weights, but they can be aggregated by redirection. Responsive sites are easy to gather site weight, easy to put the weight of mobile and PC side of the weight overlay, improve the site ranking. PS: This approach is to use a separate website for PC and mobile.

summary

Looking all the way down, I have a general understanding of responsiveness and adaptation, so I want to summarize:

The key difference between responsiveness and adaptive

Responsive is a liquid that automatically ADAPTS to different screen sizes, no matter how weird your device is. The method of using CSS media Queries in response automatically changes the style such as display type, width, height, etc., according to the target device. This can solve the display problem of different screen sizes.

Adaptive design uses static layout based on breakpoints. Once the page is loaded, it cannot automatically adapt. Adaptive automatically detects the screen size to load the appropriate working layout, that is, when you design a site with adaptive design, you have to design common screen layouts one by one;

@media

Responsivity refers to the adaptive design for devices with different resolutions. The main means is using @media rules.

Adaptive ignores @Media’s proportional layout to accommodate different browser window sizes.

other

I recommend developing adaptive websites for performance and user experience. (Most Internet companies are web PC and mobile separate)

Responsive sites are not suitable for complex sites. (Involving some animation interaction effects, too many page elements)

It is recommended to develop a responsive PC website (transition to tablet, not to mobile) and develop a responsive mobile website (transition to tablet, not to tablet).

Simple and crude understanding is like @media ~

The last attached to the site of a test response type, support across the screen, take to: http://www.kuapingce.com/

Thank you.