## 前言如今网速不再成为适配移动端时选择响应式设计的限制因素，在资源充足的条件下，针对各端各自设计应用界面能达到应用最佳用户体验，毕竟不同类型的设备交互体验是不同的，但在团队前端资源拮据时，相比无脑自适应，响应式设计自然是最为经济适用的。 ## JS in CSS 与响应式出于性能和可维护性的因素，iofod 在设计组件样式系统时摒弃了 CSS 面向切面的组织模式，之前在[《为攻城师们打造的低代码平台》](https://juejin.cn/post/7129401262566539301)一文陈述了原由，基于近期在响应式设计实践上新获得的感悟，来作为对旧文的一点补充。我们见过很多 CSS 特性 Polyfill 库是由 JS 编写的，却几乎没有反过来的情况，多数时候新特性出现的兼容问题，CSS 新特性必须等待浏览器厂商的跟进和用户自己本地升级来解决，而 JS 很容易利用特性判定的方式为不支持的内容做兼容，甚至是 JS 新语法都可通过各种工具编译到 ES5 来支持，其能力的边界远非 CSS 可及。就拿近期大家最为期待的容器查询特性 `@container` 来说，这相比之前屏幕查询适配的方式更加灵活了，无疑是下一代响应式页面设计的利器，按惯例打开 caniuse 看下： ![caniuse.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b29280545e604f91be3523ac50f32d0a~tplv-k3u1fbpfcp-watermark.image?) 离大规模应用还有些距离。然而用 JS 的同等实现不过分分钟的事情，iofod 里仅需新建一个状态表达式借助模型变量实现： ```javascript default:$parentWidth < 800 ``` ## 响应式拓展回到主流的响应式方案上，CSS 媒体查询也有不少毛病，容器查询普及后估计情况能得到改善（附带一波新语法~），于此同时，JS in CSS 表示一切正常，它的起点就是 CSS 未来的努力终点（误）。那么 JS in CSS 的方案如何支持主流方案的呢？当下媒体查询基于屏幕去适配，因此我们首先需监听屏幕窗口的变动，保存屏幕尺寸值，接着在表达式里引用它们去计算即可。比如我们把屏幕值保存到 device 的模型变量 vw, vh 上，接下来我们响应屏幕的值去改变样式，如： ```javascript default:$vw <= 1024 default:$vh > 500 ``` 当然，CSS 媒体查询避免不了的样板代码，JS in CSS 也避免不了，我们适配多少类屏幕就需要多少条查询表达式： ```javascript default:$vw <= 1920 default:$vw <= 1440 default:$vw <= 1024 default:$vw <= 768 default:$vw <= 425 default:$vw <= 375 ``` 写模板代码不可避免，但工程师的偷懒天性阻止你这么干，我们需要工具生成这些！来来来接下让我们欢迎今天的女主——**响应式布局工具**闪亮登场！搭配 JS in CSS 一键生成响应式模板，结合工具内置的视口切换功能，快速获得反馈快速修正样式。 ## 安装与使用响应式布局拓展默认添加到 iofod 拓展区，假如你是老用户或者还没安装该拓展的用户，可在 iofod 编辑器里点击超级菜单里的【拓展管理】按钮唤起拓展管理面板，点击【添加拓展】，搜索关键词【响应式】： ![t1.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/999ce1c6b5d947e29ca1df716048542d~tplv-k3u1fbpfcp-watermark.image?) 点击搜索结果进去，即可看到拓展详情界面，点击【安装拓展】， ![t2.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c7a5774972045b9b5acd30c6bf3c7d6~tplv-k3u1fbpfcp-watermark.image?) 关闭拓展管理面板，可以发现响应式布局拓展已经添加到右下角的拓展区里。 ![t3.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37fbd76cd5204fe68e701a4f9684e2f6~tplv-k3u1fbpfcp-watermark.image?) 需要注意的是，默认只有 PC 类型的项目才支持响应式设计（当然你可以通过定制移动端模板去支持，但一般只建议用于 PC 模板），我们点击开启响应式布局拓展，点击【应用响应式】为当前项目开启响应式功能： ![show1.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02bc52cb54fd4dcdab6cc18cf5b39870~tplv-k3u1fbpfcp-watermark.image?) 可以看到，拓展内置了多个断点条件，与 CSS 媒体查询的条件断点是类似的，我们选择需要适配的尺寸范围即可。 ![show2.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3452b903f6f43ea9445b8c5b8f8bf35~tplv-k3u1fbpfcp-watermark.image?) 紧接着，选中需要应用响应式设计的目标组件，再点击【生成模板】为当前组件生成响应式状态模板。组件的状态面板已经根据我们配置的范围生成子状态，接下来根据实际需要调整状态模板： ![show3.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4896a7f7ed7b47c990eae8e6e2865549~tplv-k3u1fbpfcp-watermark.image?) 一般，我们根据刚刚的断点范围，在脑海里初步给出各个断点状态的数值，只需要有个大概范围就行不要求很准确，接下来通过不同视口下的表现去调整或者理想的数值，我们点击拓展的【视口】菜单，该栏目列出了常用的设备视口，点击即可切换当前视口大小为所选设备的尺寸： ![show4.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/153e9f849b0e4a80b145bf2e97947047~tplv-k3u1fbpfcp-watermark.image?) ## 案例：知乎的适配接下来我们以知乎电脑版首页为例实战多端适配（PC，平板以及手机三端适配）。首先，新建项目，将电脑版首页剔除无关元素，主体内容用 iofod 配合 Material UI 拓展实现： ![demo1.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de9cd5d0cfa7462bb232e77148fbae14~tplv-k3u1fbpfcp-watermark.image?) 接着点击【应用响应式】为当前项目开启响应式功能，选择如下基础断点条件： ![conf1.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ce0ea565df94bda84f96a2c6527c7dd~tplv-k3u1fbpfcp-watermark.image?) 需要注意的是，断点条件的选择不是固定这几个，有些组件的适配只需要一个，有些则需要四个或以上才能很好适配，我们需根据实际情况调整。为了快速定位应用响应式的组件，在右下角的使用习惯-界面设置配置开启【标记响应式组件】选项即可在结构栏目标记这些组件， ![mark1.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2048a92f54854e73949c985c0c0cdafa~tplv-k3u1fbpfcp-watermark.image?) 我们分别对顶部导航的所有子组件以及左右两栏应用响应式模板，修改模板状态的样式属性，利用响应式拓展来回切换视口微调它们，这里同样根据实际需要切换视口，调整完成后三端最终的适配效果如下： - 桌面电脑/笔记本 ![demo2.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0ca09d590474d51b02ccf34f0c06753~tplv-k3u1fbpfcp-watermark.image?) - 平板电脑 ![demo3.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be9dba1fbcb543378a720374d394bfe0~tplv-k3u1fbpfcp-watermark.image?) ![demo4.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/048b23a41d1049068e289b81b8351ef6~tplv-k3u1fbpfcp-watermark.image?) - 手机 ![demo5.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec88e69fc251407ea60f0a78d80961b4~tplv-k3u1fbpfcp-watermark.image?) ![demo6.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/496db1a997114029aec9b49785acd219~tplv-k3u1fbpfcp-watermark.image?) 不妨自己动手试试呗，前往[【项目主页】](https://www.iofod.cn/app/014142d66119d0cc05c69e3ccf10312d/index.html#/index)查看实现细节。 ## 结语媒体查询，弹性布局和相对布局的综合运用构成了响应式设计的三板斧，iofod 利用 JS in CSS 把它们应用范围从 Web 拓展到全平台，于此同时向后兼容新响应式设计。JS in CSS 与模块化 CSS，CSS in JS 一样都属于一种弥补原生 CSS 缺陷的方法论，目前我们在低代码领域应用实践取得不少经验，未来尝试引入到传统开发链路中，以框架或打包工具插件的形态面世，敬请期待~ -------------- 如果使用过程有任何问题，可以公众号搜索【iofod】或【数字围猎】，点【联系我们】可在线提问，或者添加小助手微信：iofod_beta 进群交流。相关链接： - [iofod - 为攻城师们打造的低代码平台](https://juejin.cn/post/7129401262566539301) - [mdn 响应式设计](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design) - [Responsive Web Design](https://alistapart.com/article/responsive-web-design/) - [2022 年的 CSS](https://www.w3cplus.com/css/what-is-new-css-in-2022.html)