随着移动互联网的高速发展，当前使用手机、平板的人数已经赶超电脑。而当传统站点在宽屏显示器上呈现完美显示效果的同时，用户使用小屏打开时却产生了画面变形，不仅文字信息，整个网站布局也会发生错位混乱。传统网站如何在不同尺寸的设备上得到一致的用户体验呢？除了投资建设如电脑版、手机版等好几个网站来适配不同的终端设备，还有什么更好的解决方案？
解决目前企业客户普遍存在的痛点，全智能化跨平台网站逐渐普及开来，又称为响应式网站（Responsive Web Desgin），它可以通过流式布局、图像自适应以及CSS适配的运用，让网页根据不同浏览设备进行相应的自调整。其最主要的亮点就在于同一个网站，能自动智能识别终端设备屏幕的分辨率，自动对网站的内容和布局进行灵活的调整，使整个网站内容在任何设备上都展现出令人惊艳的显示效果。
-
流动布局
Fuid grids原特指以百分比为度量单位的布局技术实现方式。在响应式设计的布局中，不再以像素（px）作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。 -
媒介查询
Media queries媒介查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询，可以获取到设备及设备的特性，并给出求同存异的方案，从而解决之前在单纯的布局设计中遗留的问题。 -
弹性图片
Scalable images伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。根据此概念扩大应用范围，除了图片，还应该包括图标、图表、视频等信息内容的响应方式应用。
流动布局Fuid grids
媒介查询Media queries
弹性图片Scalable images
基于设备
通过主流设备的类型及尺寸来确定布局断点（break point），设计多套样式，再分别投射到响应的设备。
优势：可以相对固定断点、方便提炼设计模式
缺点：设备的快速更新，总有无法覆盖或是不能良好适配的设备
基于内容
根据内容的可读性、易读性作为确定断点（break point）的标准，即在对内容进行布局设计时，可以无视设备，由内容决定何时需要采用不同的呈现方式。
优势：适应性更强，基本上能覆盖全目标设备
缺点：很难提炼标准准的设计模式，断点可能会根据内容的不同而有所不同；需要考虑设备的物理尺寸
基于设备
通过主流设备的类型及尺寸来确定布局断点（break point），设计多套样式，再分别投射到响应的设备。
优势：可以相对固定断点、方便提炼设计模式
缺点：设备的快速更新，总有无法覆盖或是不能良好适配的设备
基于内容
根据内容的可读性、易读性作为确定断点（break point）的标准，即在对内容进行布局设计时，可以无视设备，由内容决定何时需要采用不同的呈现方式。
优势：适应性更强，基本上能覆盖全目标设备
缺点：很难提炼标准准的设计模式，断点可能会根据内容的不同而有所不同；需要考虑设备的物理尺寸
-
Boostrap框架是目前全球最主流的前端响应式框架，受欢迎意味着有更多开发人员的参与，因此会有更多的第三方扩展，能够更好的与现实web开发项目结合。同时框架还在持续开发中，最近发布了bootstrap4，拥有了box-flex布局等更新，紧跟最新web技术的发展。
-
Boostrap发布已经5个年头，相对来说是比较成熟的框架，大量项目证实其稳定性毋庸置疑。
-
框架非常的详细，拥有大量的组件样式，这既是优点也是缺点，因为定制化很高。在很多情况下，最好选择一个有最少样式的框架，更容易自定义。添加新的css规则要比复写现有的样式规则方便的多。
以上基于Bootstrap框架的所有展示内容都属于系统的UI部分，关于跟后台数据交互的及业务逻辑部分我们建议采用当今行业最新的主流前端MVVM框架Vue框架。
采用Vue框架的优势
Vue框架内部使用的是Virtual DOM，提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。良好的上下兼容性，Vue提供了强大的路由来应对大型应用。React社区在状态管理方面非常有创新精神（比如Flux、Redux），而这些状态管理模式甚至Redux本身也可以非常容易的集成在Vue应用中。Vue 支持所有兼容ECMAScript 5的浏览器。以上基于Bootstrap框架的所有展示内容都属于系统的UI部分，关于跟后台数据交互的及业务逻辑部分我们建议采用当今行业最新的主流前端MVVM框架Vue框架。
Vue框架内部使用的是Virtual DOM，提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。良好的上下兼容性，Vue提供了强大的路由来应对大型应用。React社区在状态管理方面非常有创新精神（比如Flux、Redux），而这些状态管理模式甚至Redux本身也可以非常容易的集成在Vue应用中。Vue 支持所有兼容ECMAScript 5的浏览器。
项目的UI界面基于Bootstrap框架，数据交互基于jQuery或者Angluarjs框架的组合。
项目的UI界面基于Bootstrap框架，数据交互基于jQuery或者Angluarjs框架的组合。
项目的UI界面基t于Framework7或者Ionic框架，数据交互基于Vue.js或者Angluarjs框架的组合。
沪公网安备 31011502005248号