精通响应式布局：从flex到grid的全面解析-优快云博客

本文链接：https://blog.youkuaiyun.com/Shelia_/article/details/108972667

本文详细介绍了响应式布局，包括flex布局的主轴、交叉轴属性，以及grid布局的容器和项目属性。重点讨论了响应式布局的实现方式，如媒体查询、百分比布局和rem布局，并解释了em, rem, vw(vh)单位的区别。此外，还提到了响应式布局中设置viewport的重要性以及注意事项，如兼容性和UI框架的使用。" 110293078,9510274,Java面试20K必问知识点大全，涵盖基础到微服务,"['Java', '面试', 'Spring', '面试题']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

响应式布局

课堂目标

掌握flex布局
掌握网格布局
掌握响应式布局

知识点

flex 布局（弹性布局）参考

分为主轴（main axis）和交叉轴（cross axis）

flex容器属性：

flex-direction：设置主轴的方向，默认 row
- row（默认值）：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿
flex-wrap：定义换行方式，默认不换行 nowrap
- nowrap（默认）：不换行
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方
justify-content：定义了项目在主轴上的对齐方式，默认 flex-start
- flex-start：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目间间隔都相等
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items：定义项目在交叉轴上如何对齐，默认 stretch
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline: 项目的第一行文字的基线对齐
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
- stretch（默认值）：轴线占满整个交叉轴
- flex-start：与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- center：与交叉轴的中点对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

项目的属性：

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，负值无效
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
flex属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

grid 布局（网格布局）

容器属性：

grid-template-columns：定义每一列的列宽

grid-template-rows：定义每一行的行高

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

repeat()：接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。重复某种模式也是可以的.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
grid-template-columns: repeat(2, 100px 20px 80px);

auto-fill :关键字
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
```
.container {  display: grid; 
              grid-template-columns: repeat(auto-fill, 100px);
}
```
fr 关键字
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍.
```
.container {  display: grid;  
              grid-template-columns: 1fr 1fr; }
```
minmax():函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
auto关键字表示由浏览器自己决定长度。
网格线的名称:grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式.
grid-template-areas 属性
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
grid-auto-flow 属性
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。
justify-items属性设置单元格内容的水平位置（左中右）。
align-items属性设置单元格内容的垂直位置（上中下）。
place-items属性是align-items属性和justify-items属性的合并简写形式。
justify-content属性是整个内容区域在容器里面的水平位置（左中右）。
align-content属性是整个内容区域的垂直位置（上中下）。
place-content属性是align-content属性和justify-content属性的合并简写形式。
grid-auto-columns属性和grid-auto-rows属性用来设置浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高
grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

项目属性：

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
grid-area属性指定项目放在哪一个区域。
justify-self属性设置单元格内容的水平位置（左中右）
align-self属性设置单元格内容的垂直位置（上中下）
place-self属性是align-self属性和justify-self属性的合并简写形式。

参考

容器和项目

容器：采用网格布局的区域

display: grid;
// or
display: inline-grid;

项目：容器内部顶层子元素，不包含项目的子元素

容器属性

项目属性

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

响应式布局

用一套代码，针对不同的屏幕尺寸，做不一样的布局适配。

响应式与自适应的区别：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvnqODy4-1602206449768)(media/16012895525245/16013092251188.jpg)]

响应式布局的几种方式：

媒体查询
选择分隔点：480px，800px，1400px[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-entLXVZL-1602206449769)(media/16012895525245/16013038619741.jpg)]
具体按实际情况再做分隔。

写法：
随着屏幕宽度的变大或变小，后面的样式覆盖前面的样式。
宽度由大到小，用max-width：

/* 宽度由大到小，用max-width */
/* 宽度小于等于 1400px */
@media screen and (max-width: 1400px) {
    .left {
        background-color: blue;
    }
    .right {
        background-color: red;
    }
}
/* 宽度小于等于 800px */
@media screen and (max-width: 800px) {
    .left {
        background-color: pink;
    }
    .right {
        background-color: darkgreen;
    }
}
/* 宽度小于等于 480px */
@media screen and (max-width: 480px) {
    .right, .left {
        float: none;
        width: 100%;
        height: 100px;
    }
}

宽度由小到大，用min-width：

/* 宽度由小到大，用min-width */
/* 宽度大于等于480 */
@media screen and (min-width: 480px) {
    .left {
        background-color: pink;
    }
    .right {
        background-color: darkgreen;
    }
}
/* 宽度大于等于 800px */
@media screen and (min-width: 800px) {
    .left {
        background-color: blue;
    }
    .right {
        background-color: red;
    }
}
/* 宽度大于等于 1440px */
@media screen and (min-width: 1440px) {
    .right, .left {
        float: none;
        width: 100%;
        height: 100px;
    }
}

百分比布局

各属性用百分比作值的话，相对于自身的父元素对应的属性并不全是对应的：
- 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
- 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width
- border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度
- 子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样，子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。
相比来说考虑的内容较为复杂，所以不建议使用

rem布局

rem 是CSS3新增的单位，并且移动端的支持度很高
1rem 等于根元素设置的font-size的 px 值。比如 html{font-size:16px;} ，那么 1 rem = 16px。
当页面的 size 发生变化时，只需要改变 font-size 的值，那么以rem为固定单位的元素的大小也会发生响应的变化，对字体也有影响
rem 的响应式布局，可以根据容器的大小，动态改变根元素html的font-size的大小来实现。

实现：

利用媒体查询来改变font-size

@media screen and (max-width: 1400px) {
  html {
    font-size: 18px
  }
}

@media screen and (max-width: 800px) {
  html {
    font-size: 16px
  }
}

tip：这种写法比较僵硬，没有过度

用 js
当前根元素的字体大小 = 设计稿的字体大小 * 当前设备宽度 / 设计稿的宽度

function fontSizeFun (designwidth) {
    let fontSize = 100
    let relwidth = document.documentElement.clientWidth
    let relfontSize = fontSize * relwidth / designwidth + 'px'
    document.getElementsByTagName('html')[0].style.fontSize = relfontSize
}

//首次加载应用，设置一次
fontSizeFun(750)
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', fontSizeFun(750))
// 监听手机窗口变化，重新设置
window.addEventListener('resize', fontSizeFun(750))

em，rem，vw(vh)单位的区别

rem 单位都是相对于根元素html的font-size来决定大小的
em 同百分比一样，相对于父元素计算
vw：1vw 等于视口宽度的1%，vh:1vh 等于视口高度的1%
vmin：选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
vmax：选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh

viewport的作用

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width=device-width: 是自适应手机屏幕的尺寸宽度。
maximum-scale: 是缩放比例的最大值。
minimum-scale: 是缩放比例的最小值。
inital-scale: 是缩放的初始化。
user-scalable: 是用户的可以缩放的操作。

响应式布局需要注意点

设置 viewport
注意兼容性
配合媒体查询
字体需要适配（rem）
图片适配（[移动端多配图的适配](https://www.yuque.com/docs/share/55fbe73b-63cf-4358-a1f7-c5a9c12a7429?# 《移动端多倍图适配》)）
页面布局可配合flex，grid
可使用现成的UI框架（Bootstrap）

作业（国庆假期）

用网格布局实现一个布局：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cf74oPh3-1602206449771)(media/16012895525245/16013571234690.jpg)]
完善网格布局文档
实现hover动画
1. 放大缩小变化
2. 形状变化
3. 旋转变化
4. 位移变化
5. 边框、阴影变化
6. 颜色变化
游戏猫官网静态页面开发：http://www.youximao.com/