Responsive layout [responsive] and adaptive layout [adaptive], single page [spa] and multi page [MPa]

1、 Responsive layout
One website can be compatible with multiple terminate【 terminal 】, Instead of making a specific version for each terminal
advantage ：

1. Good user experience
2. Save development time 、 Economical design
3. seo friendly
4. It can be applied to all device screens

shortcoming

1. Design and style have limitations 《 The degree of freedom is too low , Local 》
2. Lack of flexibility
   The device attributes based on different terminals are different , The requirements for product user experience will be quite different . There are many functional websites, which are not suitable for responsive website design

Responsive Responsive layout
Different display ways of browsing web pages are realized on terminals with different shielding resolutions
Through responsive design , Make the website have a better browsing and reading experience on mobile phones and tablets . In other words, a website can be compatible with multiple terminals , Instead of making a specific version for each terminal
Adaptive Adaptive layout
In order to use the new web page design method and technology of self-adaptive display on terminal devices of different sizes , It needs to develop multiple sets of interfaces to apply to different terminals

difference ：

1. Adaptive layout by detecting viewport resolution , To determine whether the currently accessed device is PC、Ipad、 mobile phone , To request the service layer , Return to different interfaces ; Responsive layout by detecting viewport resolution , Do code processing on the client for different clients , Show different layouts and contents .
2. Adaptive layout requires concurrent multiple interfaces , Responsive layout only needs to develop a set of interfaces
3. The adaptive screen adaptation to the page is within a certain range ; such as pc The end is generally larger than the end 1024 Pixels , The mobile terminal should be less than 768 Pixels , Responsive layout is a set of pages that all adapt to
4. If the shielding of adaptive layout is too small, the content will be overcrowded . The concept of responsive layout is derived to solve this problem , It can automatically recognize the screen width and make corresponding adjustments to the web design .

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

1、device-width also called css-width
Define the shielding visible width of the output device
No matter your web page is safari open , Or nested in a webview Kind of ,device-width It's all about your equipment , If it is the same device , Then its value will not change
Eg：iPhone6、iPhonese Of device-widthdevice-height 375667
And with him DPI It's nothing to do with it

2、width： also called phys.width physics
Define the width of the page visible area in the output device ,
The output is the width of the visible area of your web page , If your web page is a mobile web page nested in a webview in ,width It's actually webview The width and height of , If in different browsers width and height It may not be the same .

Generally we mean width width=》phys.width
phys.width=>document.documentElement.clientWidth
css.widht->window.screen.width