共计 2464 个字符，预计需要花费 7 分钟才能阅读完成。
微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
快来收费体验 ChatGpt plus 版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home
这篇文章探讨了新一代响应式设计的演进过程。它强调了过来几年中响应式设计的改革和倒退，以适应一直变动的设施和用户体验需要。
文章介绍了新一代响应式设计的要害特点和趋势。它强调了对挪动设施的优化，包含挪动优先设计和疾速加载速度的重要性。它还探讨了灵活性和自适应性的概念，以确保设计在各种屏幕尺寸和设施上都能良好展现。
该文章还提到了新一代响应式设计所面临的挑战和解决方案。其中包含解决简单布局和交互元素的办法，以及利用新技术和工具来实现更高级的响应式成果。
上面是注释~~~
大家都晓得响应式设计的工作原理，但咱们大多数开发人员仍在寻找最佳实际来实现它。2013 年初，当我开始进行响应式设计时，我很快意识到网络上风行的办法并不适宜我，于是我开始了深刻响应式设计畛域的旅程。
为什么“挪动优先”不再足够好！
挪动优先方法论的创造初衷是根本款式以挪动端为主，但这并不总是正确的！在我的第一个响应式案例钻研中，我参加了一个十分大的我的项目。
在挪动设施上，导航栏是一个侧边菜单，而在桌面设施上，导航栏是一个顶部菜单。
查看挪动和桌面导航栏
挪动导航栏
PC 导航栏
那时我明确了，在这种状况下，“挪动优先”并不适合！你问为什么？因为无论我是“挪动优先”还是“桌面优先”，我都会发现自己须要大量的 CSS 笼罩！而且如果有一件事我在 CSS 中学到的，那就是 CSS 笼罩是邪恶的！
整顿你的 CSS/SASS
为了应用我的新办法，放弃高度组织性并为小组件保护小的 SASS 文件十分重要。这样，咱们就能够享受这种技术的益处。
基于组件的设计
为了实现有序性，最重要的是将款式分成小组件并应用独自的文件进行拆散。在应用 SASS 时，咱们能够应用 @import 进行拆散。这有助于咱们实现有序性。
输入将只有一个 CSS 文件，这对于浏览器和服务器来说是一件坏事，以防止有大量的 HTTP 申请。
媒体查问的款式应该放在哪里？
文件的拆散为咱们提供了一种简略的构造程序，因而将媒体查问搁置在每个组件中，凑近它们本人的款式，是最好的地位。
当初，因为每个组件都有雷同的断点，将它们放入变量中以便更轻松地保护代码会更好。创立一个 SASS 文件（例如：_devices.scss），将常见的断点作为变量。
当初只需应用变量即可：
当设计师忽然感觉断点须要更改时，这个技巧能够帮忙您防止更改大量代码行。
新“根本优先”办法，以及为什么放弃了“挪动优先”！
我意识到“挪动优先”是一个好主见，但它依然不是最好的，因为就像我之前说的，有时挪动设施与桌面设施十分不同。
解决问题
我的新办法 Basic First 基于一个非常简单的准则，即只有当款式在所有断点上都是通用的时候，它才会被写入组件的主根。
在断点中须要 CSS 封装
除此之外，我还有另一个问题须要解决。网络上的常见做法是应用仅以最小宽度为终点而没有最大宽度的断点（称之为“开放式断点”），这是一个十分大的问题！你问为什么？因为你简直无法控制下层断点会受到什么影响！
以下是《卫报》网站的一个例子，展现了为什么凋谢的断点是不好的！
浏览器中有一个查看元素的小组件，即 logo。看看它有多少笼罩！当我看到这么多笼罩时，我就晓得代码有问题了！它十分难以浏览，更蹩脚的是，如果你在底部增加了一些内容，它会影响所有下面的断点而没有任何管制！
理解响应式断点类型
我将响应式断点分为两种类型，关上断点和闭合断点。
Open breakpoints 关上断点
当咱们应用媒体查问时，有一个起始值但没有完结值。例如:
Closed breakpoints 闭合断点
当咱们应用具备开始和完结值的媒体查问时。例如：
好的，哪个更好用？
请仅应用闭合断点！除非是咱们想要反对的最大分辨率的最初一个断点。
例如：
然而如果咱们想在两个或更多断点中应用雷同的款式呢？
非常简单！您能够在同一个媒体查问中应用尽可能多的断点，应用逗号（示意“或”），因为咱们曾经将这些断点保留在变量中，所以能够轻松应用它们。
CSS 封装的威力与闭合断点
当初让咱们再来看看这个主题目组件。在这张图片中，HTML 是雷同的，但挪动设施 + 平板电脑和桌面版本看起来齐全不同！
我所做的是将“挪动导航栏”的款式放在挪动 + 平板电脑的断点上，将桌面的款式放在桌面断点上。
- 挪动设施 + 平板电脑——实用于 0 像素至 1000 像素宽度
- 桌面版 – 实用于 1001 像素及以上的屏幕
当初，“挪动导航栏”的款式不会影响“桌面导航栏”的款式，反之亦然。它们都被封装了！
这意味着在这种办法中，以这个例子来说，如果我扭转挪动平板的款式，桌面版款式并不会受到影响；同样地，如果我扭转桌面版的款式，挪动平板的款式也不会受到影响。这就是 CSS 响应式设计的自由性！
这就是我对“根底优先”方法论的全部内容！
总结
从这篇文章中须要理解的重点是什么：
- 以小组件为单位工作
- 在独自的文件中定义 SASS 变量中的常见闭合断点
- 在每个须要的组件中应用 SASS 变量的断点
- 工作和思考时要“根本优先”！只有当一个组件的所有断点都须要应用公共款式时，才应用公共款式！否则，只将它们放在相干的断点中
- CSS 笼罩是无害的！尽量避免应用
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
