理解响应式与自适应

2022年10月18日 · 阅读需 3 分钟

Learner

响应式:是一种网页响应浏览器缩放的前端技术，让网页内容可以随画布尺寸变化相关的样式细节

自适应：如访问京东官网https://jd.com/ ,然后调试设备为移动端刷新页面就会自动重定向到https://m.jd.com/，在移动端这个项目里也使用了响应式布局来适配移动端各种屏幕。

响应式的规则其实并不复杂，即父、子级元素的宽度应对逻辑

首先，响应式布局应用了栅格布局系统，即用格线来对齐和排版元素的方式，这是脱胎于平面网格系统的排版方法

24可以被最多的数整除，使用起来是相对最完善的一个数字，我们只需要确定列数、间距和边距

在响应式的栅格中总宽、列宽都是不固定的所以我们拉伸对应的画布就会看到列宽也在移动

响应式的基本应用原则：匹配栅格列数让元素的宽度根据列数的宽度进行适配

在这个体系下，下级元素，再根据模块的宽度做适应

栅格的应用是最核心的知识点，然后才是响应范围和断点的应用内容

响应范围：需要作用响应式的区域和大小

区域：覆盖全屏或者忽略某些范围(如侧边栏导航 )

大小：响应区域的最小值和最大值区间(一般pc设置最小240侧边和560px)

所以，响应式制定，就下面这几个要点:

断点：把试图的宽度制定不同的等级，如下这套方案：

我们可以针对每个等级设置不同的栅格列数，比如同一个卡片，在不同范围中设置不同的栅格列数，当列数不够用时列表就会自动切换到下一行去

不同的页面使用的响应细节往往差别巨大，需要灵活的根据响应式的原则制定方案

理解响应式与自适应​