前端如何优雅的实现跨终端开发（PC端+移动端）

Posted 2022-12-26 清颖~

文章目录

• • • 解决方案一：使用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媒体查询简洁。

相关链接

1. CabloyJS文档：https://cabloy.com
2. B站视频：独树一帜的跨端方案：pc=mobile+pad自适应布局