JS in CSS:一键支持响应式布局

前言

如今网速不再成为适配移动端时选择响应式设计的限制因素,在资源充足的条件下,针对各端各自设计应用界面能达到应用最佳用户体验,毕竟不同类型的设备交互体验是不同的,但在团队前端资源拮据时,相比无脑自适应,响应式设计自然是最为经济适用的。

JS in CSS 与响应式

出于性能和可维护性的因素,iofod 在设计组件样式系统时摒弃了 CSS 面向切面的组织模式,之前在《为攻城师们打造的低代码平台》一文陈述了原由,基于近期在响应式设计实践上新获得的感悟,来作为对旧文的一点补充。

我们见过很多 CSS 特性 Polyfill 库是由 JS 编写的,却几乎没有反过来的情况,多数时候新特性出现的兼容问题,CSS 新特性必须等待浏览器厂商的跟进和用户自己本地升级来解决,而 JS 很容易利用特性判定的方式为不支持的内容做兼容,甚至是 JS 新语法都可通过各种工具编译到 ES5 来支持,其能力的边界远非 CSS 可及。

就拿近期大家最为期待的容器查询特性 @container 来说,这相比之前屏幕查询适配的方式更加灵活了,无疑是下一代响应式页面设计的利器,按惯例打开 caniuse 看下:

caniuse.jpg

离大规模应用还有些距离。然而用 JS 的同等实现不过分分钟的事情,iofod 里仅需新建一个状态表达式借助模型变量实现:

default:$parentWidth < 800

响应式拓展

回到主流的响应式方案上,CSS 媒体查询也有不少毛病,容器查询普及后估计情况能得到改善(附带一波新语法~),于此同时,JS in CSS 表示一切正常,它的起点就是 CSS 未来的努力终点(误)。那么 JS in CSS 的方案如何支持主流方案的呢?

当下媒体查询基于屏幕去适配,因此我们首先需监听屏幕窗口的变动,保存屏幕尺寸值,接着在表达式里引用它们去计算即可。比如我们把屏幕值保存到 device 的模型变量 vw, vh 上,接下来我们响应屏幕的值去改变样式,如:

default:$vw<device> <= 1024
default:$vh<device> > 500

当然,CSS 媒体查询避免不了的样板代码,JS in CSS 也避免不了,我们适配多少类屏幕就需要多少条查询表达式:

default:$vw<device> <= 1920
default:$vw<device> <= 1440
default:$vw<device> <= 1024
default:$vw<device> <= 768
default:$vw<device> <= 425
default:$vw<device> <= 375

写模板代码不可避免,但工程师的偷懒天性阻止你这么干,我们需要工具生成这些!来来来接下让我们欢迎今天的女主——响应式布局工具闪亮登场!搭配 JS in CSS 一键生成响应式模板,结合工具内置的视口切换功能,快速获得反馈快速修正样式。

安装与使用

响应式布局拓展默认添加到 iofod 拓展区,假如你是老用户或者还没安装该拓展的用户,可在 iofod 编辑器里点击超级菜单里的【拓展管理】按钮唤起拓展管理面板,点击【添加拓展】,搜索关键词【响应式】:

t1.jpg

点击搜索结果进去,即可看到拓展详情界面,点击【安装拓展】,

t2.jpg

关闭拓展管理面板,可以发现响应式布局拓展已经添加到右下角的拓展区里。

t3.jpg

需要注意的是,默认只有 PC 类型的项目才支持响应式设计(当然你可以通过定制移动端模板去支持,但一般只建议用于 PC 模板),我们点击开启响应式布局拓展,点击【应用响应式】为当前项目开启响应式功能:

show1.jpg

可以看到,拓展内置了多个断点条件,与 CSS 媒体查询的条件断点是类似的,我们选择需要适配的尺寸范围即可。

show2.jpg

紧接着,选中需要应用响应式设计的目标组件,再点击【生成模板】为当前组件生成响应式状态模板。组件的状态面板已经根据我们配置的范围生成子状态,接下来根据实际需要调整状态模板:

show3.jpg

一般,我们根据刚刚的断点范围,在脑海里初步给出各个断点状态的数值,只需要有个大概范围就行不要求很准确,接下来通过不同视口下的表现去调整或者理想的数值,我们点击拓展的【视口】菜单,该栏目列出了常用的设备视口,点击即可切换当前视口大小为所选设备的尺寸:

show4.jpg

案例:知乎的适配

接下来我们以知乎电脑版首页为例实战多端适配(PC,平板以及手机三端适配)。

首先,新建项目,将电脑版首页剔除无关元素,主体内容用 iofod 配合 Material UI 拓展实现:

demo1.jpg

接着点击【应用响应式】为当前项目开启响应式功能,选择如下基础断点条件:

conf1.jpg

需要注意的是,断点条件的选择不是固定这几个,有些组件的适配只需要一个,有些则需要四个或以上才能很好适配,我们需根据实际情况调整。为了快速定位应用响应式的组件,在右下角的使用习惯-界面设置配置开启【标记响应式组件】选项即可在结构栏目标记这些组件,

mark1.jpg

我们分别对顶部导航的所有子组件以及左右两栏应用响应式模板,修改模板状态的样式属性,利用响应式拓展来回切换视口微调它们,这里同样根据实际需要切换视口,调整完成后三端最终的适配效果如下:

  • 桌面电脑/笔记本

demo2.jpg

  • 平板电脑

demo3.jpg

demo4.jpg

  • 手机

demo5.jpg

demo6.jpg

不妨自己动手试试呗,前往【项目主页】查看实现细节。

结语

媒体查询,弹性布局和相对布局的综合运用构成了响应式设计的三板斧,iofod 利用 JS in CSS 把它们应用范围从 Web 拓展到全平台,于此同时向后兼容新响应式设计。JS in CSS 与模块化 CSS,CSS in JS 一样都属于一种弥补原生 CSS 缺陷的方法论,目前我们在低代码领域应用实践取得不少经验,未来尝试引入到传统开发链路中,以框架或打包工具插件的形态面世,敬请期待~


如果使用过程有任何问题,可以公众号搜索【iofod】或【数字围猎】,点【联系我们】可在线提问,或者添加小助手微信:iofod_beta 进群交流。

相关链接:

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
相关推荐
  • 暂无相关文章
  • 评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    取消
    昵称表情代码图片

      暂无评论内容