响应式布局【Responsive】与自适应布局【adaptive】、单页面【SPA】和多页面【MPA】：旅游规划与开发的几种主要空间布局模式

本文主要介绍关于前端的知识点，对【响应式布局【Responsive】 与 自适应布局 【adaptive】、单页面【SPA】 和多页面【MPA】】和【旅游规划与开发的几种主要空间布局模式】有兴趣的朋友可以看下由【Ares-Wang】投稿的技术文章，希望该技术和经验能帮到你解决你所遇的相关技术问题。

旅游规划与开发的几种主要空间布局模式

1、响应式布局
是一个网址能兼容多个terminate【终端】，而不是为每个终端做一个特定的版本
优点：

用户体验好节约开发时间、节省设计seo友好可以适用所有设备屏幕

缺点

设计与风格有局限性《自由度太低，局部性较大》灵活性有所欠缺
基于不同的终端的设备属性不同，对产品用户体验要求就会截然不同。内容较多带有功能性网站不适做响应性网站设计

Responsive 响应式布局
实现不同屏蔽分辨率的终端上了浏览网页的不同展示方式
通过响应式设计的，使网站在手机和平板上有更好的浏览阅读体验。换句话说就是一个网站能兼容多个终端，而不是为每个终端做一个特定的版本
Adaptive 自适应式布局
为了使用网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适用不同的终端

区别：

自适应布局通过检测视口分辨率，来判断当前访问的设备是PC、Ipad、手机，从而请求服务层，返回不同界面； 响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，开展现不同布局和内容。自适应布局需要并发多套界面，而响应式布局只需要开发一套界面就可以了自适应对页面做的屏蔽适配是在一定范围；比如 pc端一般要大于1024像素，手机端要少于768像素，而响应式布局是一套页面全部适应自适应布局如果屏蔽太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。

 <meta name="viewport" content="token punctuation">"> 

1、device-width 又称css-width
定义输出设备的屏蔽可见宽度
不管你的网页是在safari 打开，还是嵌套在某个webview种，device-width 都跟你的设备有关，如果是同一个设备，那么它的值就不会变的
Eg：iPhone6、iPhonese的device-widthdevice-height 375667
而跟他的DPI等无关

2、width： 又称phys.width physics
定义输出设备中的页面可见区域宽度，
输出的是你的网页可见区域的宽度，假如你的网页是移动端网页嵌套在某个webview中，width实际上就是webview的宽高，如果在不同的浏览器中width和height也可能不一样。

一般我们所指的宽度 width=》phys.width
phys.width=>document.documentElement.clientWidth
css.widht->window.screen.width

本文《响应式布局【Responsive】 与 自适应布局 【adaptive】、单页面【SPA】 和多页面【MPA】》版权归Ares-Wang所有，引用响应式布局【Responsive】 与 自适应布局 【adaptive】、单页面【SPA】 和多页面【MPA】需遵循CC 4.0 BY-SA版权协议。