序言
现如今网络速度不会再变成兼容手机端的时候选择响应式页面的制约因素，在资源充裕的条件下，对于各端分别设计方案应用界面可以达到运用最好客户体验，终究不同种类的机器设备交互方式是不一样的，但在团队前端资源窘迫时，对比没脑子响应式，响应式页面当然是比较经济实用的。
JS in CSS 与响应式网站
出自于性能可扩展性的影响因素，iofod 在规划部件款式系统时摆脱了 CSS 面对横切面的组织模式，以前在《为攻城师们打造的低代码平台》一文阐述了缘由，根据最近在响应式页面实践活动上架所获得的感受，来作对旧文的一点填补。
大家见过不少 CSS 特点 Polyfill 库是通过 JS 整理的，却基本没有反过来的状况，大多时候新特性发生的兼容性问题，CSS 新特性务必等候电脑浏览器厂家的跟踪与用户自身当地更新去解决，而 JS 非常容易运用特点判断的方式为不兼容内容做适配，甚至 JS 新词法都可以根据各种软件编译程序到 ES5 来支撑，其水平的边界不是 CSS 所及。
就用最近大伙儿更为期盼的器皿查看特点 @container 而言，这较之前显示屏查看兼容的形式更加高效了，可谓是下一代响应式页面设计方案的不二法门，按国际惯例开启 caniuse 看看：
离大规模应用也有些间距。但是用 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 在线编辑器里点一下非常菜单栏中的【扩展管理方法】按键勾起扩展管理面板，点一下【加上扩展】，搜索关键字【响应式网站】：
搜索网页结论进来，即可看到扩展详细信息页面，点一下【组装扩展】，
关掉扩展管理面板，不难发现响应式网站扩展早已导入到右下角的扩展区域。
需注意，默认设置仅有 PC 种类项目才适用响应式页面（自然我们可以通过订制手机端模版去适用，但一般只提议用以 PC 模版），大家点一下打开响应式网站扩展，点一下【运用响应式网站】为现阶段新项目打开响应式网站作用：
能够看见，扩展内置了好几个中断点标准，与 CSS 媒体查询的前提条件中断点是相似的，我们在选择必须兼容尺寸范畴就可以。
随后，选定必须运用响应式页面目标部件，再点击【形成模版】为现阶段部件形成响应式网站情况模版。元件的情况控制面板早已根据我们配备的范畴形成子情况，下面依据实际需求调整心态模版：
一般，根据刚才的中断点范畴，在脑海中基本得出每个中断点情况的数值，只必须要有个大概范畴就可以了没有要求很精确，下面通过各种视口中的主要表现来调整或是理想化的数值，大家点一下扩展的【视口】菜单栏，该频道列出常见的机器设备视口，点一下就可以转换现阶段视口尺寸为选定机器的规格：
实例：知乎的兼容
下面我们以知乎问答电脑版本主页为例子实战演练跨平台兼容（PC，平面及其手机上三端兼容）。
最先，新建工程，将电脑版本主页去除不相干原素，行为主体具体内容用 iofod 相互配合 Material UI 扩展完成：
然后点一下【运用响应式网站】为现阶段新项目打开响应式网站作用，挑选如下所示基本中断点标准：
需注意，中断点要求的挑选并不是固定不动这些，有一些元件的兼容只需要一个，有的则必须四个及以上才可以非常好兼容，大家需结合实际情况调节。为了能快速查找运用响应式网站的部件，在右下角的用户习惯-页面设置配备打开【标识响应式网站部件】选择项即可在构造频道标识这种部件，
大家分别从顶部导航的所有子组件及其左右两个栏运用响应式模板，改动模版情况的样式特性，运用响应式网站扩展往返转换视口调整他们，这儿一样依据实际需求转换视口，调节结束后三端最后的兼容实际效果如下所示：
- 桌面电脑/笔记本电脑
- 平板
- 手机上
何不亲自动手试试呗，前去【新项目首页】查询完成小细节。
结束语
媒体查询，弹力规划布局相对性规划的灵活运用形成了响应式页面的三板斧，iofod 运用 JS in CSS 将它们应用领域从 Web 扩展到全网平台，与此同时向后兼容新响应式页面。JS in CSS 与模块化设计 CSS，CSS in JS 一样都属于一种填补原生态 CSS 缺点的方法论，目前国内在低代码行业应用实践获得很多工作经验，将来试着引入到传统式开发设计链接中，以架构或封装工具软件的结构问世，敬请关注~
如果采用全过程有什么问题，能够公众号搜索【iofod】或【数据猎捕】，点【在线留言】可在线咨询，或是加上助手手机微信：iofod_beta 入群沟通交流。
分类搜索：
- iofod - 为攻城略地师们推出的低代码平台
- mdn 响应式页面
- Responsive Web Design
- 2022 年 CSS