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

文章目录

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

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

HarmonyOS IDE再升级，跨终端开发真的简单了吗？
. 一直以来,跨终端开发便如拦路虎一般横亘于开发者面前,从UI到后台,从图片到数据,都让人难以把控.而凭借分布式用户程序框架.Ability框架和UI框架,HarmonyOS为开发者提供了可分可合可流 ...
谷歌浏览器调用本地exe_无需修改前端和后端代码本地跨域开发设置
现在的项目可以说99.99%都是前后端分离项目,除了极个别老项目. 跨域的本质:其实只是浏览器的一厢情愿,浏览器为了防止开发者或者别有居心之人调用其它域名下的身份信息而做的安全设置,假如不这样做,这个 ...
CORS 请求未能成功_当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)...
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
axios 跨域_当遇到跨域开发时，我们如何处理好前后端配置和请求库封装
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
当前流行前端几大UI框架（PC和移动端）
写在前面: 最近着手写一个关于社区服务医院的小项目,对于前端展示页面的框架,在网上查找一番找到了当前较为流行的几个框架.其中也有包含微信端的框架. PC端框架及其链接如下: 1.Bootstrap 官 ...
什么是跨终端web开发
一句话概括:其实Web原本并非跨终端,但应用场景多了,就变成了"跨终端". 既然说是Web,我就把范围划定在互联网相关的技术栈内. 任何基于TCP/IP模型应用层协议的Web应用的 ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
《前端跨界开发指南》重磅来袭！
谨以此书献给相信"努力有用"的你 by 大史不说话 < 前端跨界开发指南:JavaScript工具库原理解析与实战> 先做个自我介绍我是大史不说话,是一名前端工程师, ...
web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点. 语言前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行 ...

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

文章目录

解决方案一：使用CSS媒体查询。

解决方案二：写两套代码，分别应用于PC端和移动端。

推荐方案：使用CabloyJS

相关链接

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

最新文章

热门文章