文章目录
解决方案一：使用CSS媒体查询。解决方案二：写两套代码，分别应用于PC端和移动端。推荐方案：使用CabloyJS相关链接解决方案一：使用CSS媒体查询。
这是传统的解决方案。使用一套代码，先做PC端，再根据视口调节移动端样式。
伪代码：
@media screen and (max-width:992px){...}@media screen and (max-width:1400px){...}
弊端：PC端和Mobile端的界面交互体验不同，页面的布局也不同。仅仅依靠 CSS媒体查询，只是让 PC端 的页面在 Mobile端 可用，远远达不到原生 Mobile端 的效果。比较僵硬的展现在移动端。
解决方案二：写两套代码，分别应用于PC端和移动端。
这样可以达到期望的效果但是同样的业务逻辑需要开发两套代码，增加了时间成本和人力成本。
推荐方案：使用CabloyJS
pc = mobile + pad自适应布局
CabloyJS全栈框架首创pc = mobile + pad自适应布局机制
效果：只需要一套代码，同时兼容Mobile端和PC端，并且Mobile端达到原生交互体验
原理： 优先适配Mobile端，然后再把 Mobile端 的交互体验和开发模式无缝带入 PC端。因此，PC端 可以看作是许多 Mobile尺寸和Pad尺寸 页面组件的组合。
全新方案的优点：此方案同样也贯彻了开箱即用+灵活扩展的设计原则，具备简约而不简单的风格。
可以通过查阅文档或者观看视频来理解这套机制，在进行实际的前端页面开发时所需代码量非常精简，远比css媒体查询简洁。
