前端必备！！！响应式布局0基础看完这篇文章也能学会！学完直接起飞！！！

时间：2023-09-23 16:12:01 | 来源：网站运营

时间：2023-09-23 16:12:01 来源：网站运营

前端必备！！！响应式布局0基础看完这篇文章也能学会！学完直接起飞！！！：随着网速的提升(5G)和手机平板的的发展，越来越多网页被要求支持多端编程，而RWD(响应式Web设计)也是逐渐受各位CV工程师们的喜爱。我个人也是出于学习，在这里进行了相对初步的学习。学习肯定会看各种资料查阅文档，所以如有侵权，联系我删除。

什么是响应式Web设计？
RWD 指的是响应式 Web 设计（Responsive Web Design）

RWD 能够以可变尺寸传递网页 RWD 对于平板和移动设备是必需的
W3school是这样定义的，那么我们可以根据这个特点结合所学的知识，可以大概得到如下几种解决方案:

1. 使用CSS的百分比布局
2. 使用CSS3的media媒体查询
3. 使用CSS3新单位vw/vh进行布局
4. 使用Flex弹性布局
5. 使用Grid网格布局
6. 使用bootstrap框架进行布局操作

根据从各个平台查阅，大概是有这几种方法，接下来我们来“稍微”了解一下这些布局方法！
使用CSS百分比布局
如名字一般就是将所有宽高等系列的单位都改为百分比%.但是修改百分比我们要清楚如下几点：

1. 子元素的宽(width)与高(height)属性的百分比都是依托于父标签的宽与高
2. 如果使用top、right、bottom、left这四类设置偏移量的属性，要知道他们是根据非默认定位(static)的父元素进行偏移的！如果要使用它们需要开启定位！！！
3. 子元素的padding设置了百分比的话，无论垂直方向还是水平方向都相对于父元素的宽(width)进行百分比的增加减少，而与父元素的高度值(height)无关！！！！
4. 子元素的margin如果设置了百分比，无论垂直方向还是水平方向都是相对于父元素的宽进行百分比的增加减少，而与父元素的高度值(height)无关！！！

使用百分比布局有众多计算，需要根据计算来实现设计稿与实际效果之间转换，非常~不推荐！ 所以我们就有了如下几种方案来解决响应式布局问题：
媒体查询
CSS2里面的标签属性，在这里就不多介绍了。我们主要来了解CSS3中新增的这个媒体属性。 首先我们来看一下它的书写格式：

@media 媒体类型 and （媒体特性）{你的样式}

1. 媒体类型可以选择scree(电脑手机平板)、print(打印机预览)、all(所有设备)->(一般的情况不写为all，也可以设置为scree)
2. 第二个关键字除了and还有not与only，and：两个都满足时会生效；not：排除掉该特性之后会生效；only：指定某个特定的媒体类型，（一般不用）
3. 媒体特性：一般使用width就行，这里以width为例：有width：当宽度等于规定宽度时生效；min-width：当宽度大于规定宽度生效；max-width：当宽度小于规定宽度生效。

这里提供一个小案例：


<style> @media screen and (min-width:800px) { body { background-color: red; } } </style>了解完怎么写之后，我们就开始说响应式了！ 首先media可以根据特定的宽高，去改变页面的一些属性（html{font-size:xx}）,这可以配合rem去进行页面的布局。 而所谓的特定的宽高并不是凭空而来的，其对应着我们的PC端，移动端的视口宽度，具体值这里就不再多讲了。 其次可以根据页面窗口直接改变布局结构 这样就实现了页面的响应式布局了。
使用CSS3新单位vw/vh进行布局
css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。 它这个与百分比布局有点相似，但比百分比布局更好用。 (vw/vh可以与rem搭配一起使用，有奇效！)
Flex布局
学习之前我们先来了解一下flex是什么： Flexbox Layout，官方的名为弹性布局，是CSS3的新增的布局方式
Tips:任何一个容器都可以指定为flex布局，行内元素也可以使用flex布局！


<style> .app { width: 100%; height: 0; background-color: #3CC51F; padding-bottom: 40%; position: relative; display: flex; } .icon { width: 50px; height: 50px; border: 2px solid #F00; } </style> ----------------- <div class="app"> <span class="icon"></span> <span class="icon"></span> </div>了解完基本概念，那就开始学习flex： 首先我们先引入容器的概念： 在flex弹性布局中：容器的概念就是包裹着要排序的子盒子的父亲。即外层盒子（父盒子）

• 未设置flex前，div盒子受块级元素影响纵向排列，设置完后，盒子横向排列；
• 未设置flex前，子盒子相加宽或高超过父盒子的时候会溢出，设置之后不会溢出，宽与高也只能在父盒子宽高足够的情况下进行增长，超过之后则总宽与总高以父盒子大小为准。
• 在flex容器中包含两个互相垂直的轴主轴和副轴。
• 默认情况下为主轴对齐，主轴对齐会让元素横向排列。
• 当为父盒子设置了特殊属性值之后，可以将子盒子从原来的主轴对齐变为副轴对齐，副轴对齐会让元素纵向排列，主轴的起始端为左边或者上边

前边引入了主轴与副轴的大体概念，还有子盒子与父盒子的大体概念。接下来我们就来研究属性： 对于属性的研究，我们先从父盒子身上开始：

• 父盒子身上一共有6种属性

属性	实现的功能

上面展示了6个属性，现在我们开始看这6个属性到底有什么用：
flex父盒子属性
flex-direction
flex-direction有四个值，我将它们分为两类：

• 第一类值：row与column

row值是默认值，可以让子盒子成横向排列，使得主轴为水平



column值，可以让盒子成纵向排列，使得主轴为垂直，会影响wrap和justify-content

• 第二类值：row-reverse与column-reverse

（reverse adj.相反的 v.逆转 n.相反） 由词义可知，当添加了reverse之后子盒子的排列顺序与*对齐方向都会发生改变[原本是左对齐横向顺序排列，添加后为右对齐反序横向排列；原本是上对齐纵向顺序排列，添加后为下对其反序纵向排列]
row-reverse值是横向排列，但因为reverse，其对齐方式与子元素排列方式发生改变



column-reverse值是纵向排列，也因为加了reverse，所以与column的元素排列顺序和对齐方式相反



flex-wrap
flex-wrap主要控制元素是否换行，其有三个值：nowrap(默认值)、wrap、wrap-reverse

• nowrap是默认值，设置之后所有子盒子横向排列，当所有子盒子的宽度总和超过父盒子的宽度或者高度总和超过父盒子的高度时自动为每个子盒子压缩对应值，使得所有子盒子均匀的在父盒子内排列

wrap值为换行，设置之后，子盒子如果宽度占满一行，则会开辟第二行，第二行会在盒子百分之五十处开辟，如果超出到第三行，则会把父盒子分为三行进行排列，以此类推






wrap-reverse值为，从低端开始从左向右，如果宽度满了，则会向上均分空间



flex-flow
写法就是direction和wrap的值都写在这里面，是上面两个的缩写，没有先后顺序。



justify-content
justify-content 可是重头戏，也是“懂哥”们经常喜欢跳过的内容。 首先，这个属性的作用是设置子容器沿着(主轴)排列元素之间的空间分布。 这里出现了一个比较容易忽略的点，是子容器沿着主轴排列。 而主轴则会受到flex-direction的影响！！ 这是比较容易忽略的一点，很多时候单一没有连起来学习，会经常忽略,甚至学完之后，都无法将它们联系起来。快速学习固然好，但也要动手去敲~ justify-content的值有如下几个： flex-start：该值为默认值，其作用为主轴起始端对齐，紧密排列： 当主轴为row时：



当主轴为column时：



flex-end：其作用为主轴末尾端对齐，紧密排列，与reverse不同的是，它不会修改元素排列顺序，只会修改元素对齐方式：
当主轴为row时：


当主轴为column时：



center：center会让元素居中紧密排列
当主轴为row时：



当主轴为column时：



space-around：设置之后，每个子元素两侧的间隔都相等，子元素与子元素之间的间隔是子元素与边框间隔的一倍
当主轴为row时：



当主轴为column时：


space-between：子元素首尾与父元素相贴，且子元素间的空隙均匀分布
当主轴为row时：



当主轴为column时：



space-evenly：子元素首尾与父元素距离等于子元素之间的距离
当主轴为row时：



当主轴为column时：



align-items
align-items属性就是副轴对齐
flex-start：


flex-end：


center：


baseline：


stretch：



align-content
这个属性只有flex-wrap为wrap时才有效。 flex-start：该值为默认值，其作用为副轴起始端对齐，紧密排列：
当主轴为row时：



当主轴为column时：



flex-end：其作用为副轴末尾端对齐，紧密排列，与reverse不同的是，它不会修改元素排列顺序，只会修改元素对齐方式：
当主轴为row时：



当主轴为column时：



center：center会让元素居中紧密排列
当主轴为row时：



当主轴为column时：


space-around：设置之后，每个子元素两侧的间隔都相等
当主轴为row时：


当主轴为column时：


space-between：设置之后，子元素上下两侧紧贴父元素边框中间间隔相等
当主轴为row时：


当主轴为column时：


stretch（默认值）：轴线占满整个交叉轴。
当主轴为row时：


当主轴为column时：



到此父盒子内关于flex的属性已经全部过完，排列种类并非只有我写过的这些，更多还是要在实践中去理解。
flex子盒子
flex父盒子有六个属性，而flex子盒子同样也有6个属性：

属性	作用

order属性

• 定义了元素排列，默认值为0；可取负值

flex-grow属性

• 定义了放大比例，默认值为0，如果值为0则即使父盒子有剩余空间也不放大。
• 如果所有元素的flex-grow属性都为1则元素平均分配。如果有一个元素为2其他为1，则为2的元素占据空间比其他为1的元素占据空间多一倍。

flex-shrink属性

• 定义了元素缩小比例，默认值为1，1代表着如果空间不足，会将该元素缩小。
• 如果说一个元素为0，其他都为1，则空间不足时，其他flex-shrink为1的元素会缩小，为0的元素则不缩小。
• 负数无效。

flex-basis属性

• 定义了在分配多余空间之前，元素占据的主轴空间。
• 默认值为auto，意思为元素本来的大小
• 他可以和宽高一样设置固定的。则元素会占据固定的空间。

flex属性(常用)

• 它是flex-grow, flex-shrink 和 flex-basis的简写.
• flex：[ ? || ]
• 默认值为0 1 auto,后面shrink与basis可选。
• 有两个快捷值：auto(1 1 auto)和none(0 0 auto)

align-self

• 就是让该属性与其他属性对齐方式不一样。对单个元素设置之后，可以将该元素的align-item值覆盖。替换成align-self。
• 默认值为auto
• 该属性可取值与align-items属性完全一致。

个人发现的小bug
问题：当flex内容超出父盒子之后子盒子而且不设置换行，内容会被挤出到父盒子外面去。 解决办法：可以给父盒子添加overflow：hidden
Grid网格布局
在学习之前，先来了解相关概念：
Grid Layout 是一种基于二维网格的布局系统，旨在完全改变我们设计基于网格的用户界面的方式，弥补网页开发在二维布局能力上的缺陷

行/列/单元格/网格线

• 图中绿色水平区域被称为行(row)
• 图中红色水平区域被称为列(column)
• 图中行与列交叉的橙色区域被称为单元格（cell）
• 划分网格的线称为网格线(grid line)水平网络线划分出行，垂直网格线划分出列。

Grid属性
Grid属性分为父元素属性和子元素属性。下面将两个属性分开来讲：
Grid父元素属性
首先来看一下Grid父元素有哪些属性

属性名	作用

这么多属性，是不是看完了就感觉到头晕目眩？其实不然，我们可以将他们分组进行学习，接下来就开始慢慢的使用案例来对这些属性进行分组学习：
display属性

• 当属性为：grid时，则代表该父盒子采用grid网格布局，当不添加其他属性时，看不出有任何变化，但是开启了网格布局：

• 属性也可以设置为行内元素：inline-grid:将元素设置为行内行内元素：

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

grid-template-columns 属性与grid-template-rows 属性
给父元素开启了网格布局之后，下一步就是划分行与列； grid-template-columns属性定义每一列的列宽； grid-template-rows属性定义每一行的行高；

1. grid-template-columns设置了几个值，一行就放几个盒子，当盒子数超出行数时，会开辟新行存储多出的盒子

• 行内的盒子的列宽度受grid-template-columns值限制，而不会受盒子自身宽度weight影响

2. grid-template-rows设置了几个值，就会有几行有高度，当盒子数量过多超出时 - 如果子盒子未设置高度，那么在gird-template-rows设置的行数内，都会受它已设置值的影响的值的影响。变为固定行高，当盒子数量过多导致：分出的行数会超过gird-template-rows设置的行数，则超出部分的高度被内容撑开。 - 如果子盒子设置高度，则当grid-template-rows也设置了行高之后，该盒子会以自身高度为基准，展示；当子盒子高度超过盒子后，会溢出父盒子展示；

1. 当重复值过多时，可以使用repeat()函数作为值，其作用就是简化重复的值；repeat()接收两个参数，第一个参数是重复的次数，第二个参数是所要重复的值：如 grid-template-columns: repeat(3, 33.33%);
   

• 当repeat()的第二个值为多个参数的时候相当于重复某种模式如：grid-template-columns: repeat(2, 100px 20px 80px);
• repeat()第一个参数还有auto-fill关键字,当设置了这个关键字后元素会自动地主轴排列填充满父盒子。

1. Grid布局还提供了一个单位：fr关键字，这个关键字作用就是方便表示比例关系。如：grid-template-columns:1fr 1fr;就表示生成两列，且两列地宽度比例相等；如果设置为grid-template-columns:1fr 2fr 1fr;则表示生成三列，中间设置2fr的列宽是旁边两列的1倍。
   
2. fr允许与px或%一同使用，如：grid-template-columns:10% 1fr 10%;,这时fr关键字会占据所有的空隙。
   
3. auto关键字会让浏览器自己设置长度，一般情况下第二列宽度基本上等于该列单元格的最大宽度，如果该列的子盒子中有设置宽度，则这个盒子会单独呈现宽度，其他在该列且没有设置宽的盒子会自动填充满如grid-template-columns:10% auto 10%;
   
4. grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。如:grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
   

实例：

1. 设置两栏式布局：

display: grid;grid-template-columns: 30% 70%;

1. 传统十二网格布局：

display: grid;grid-template-columns: repeat(12, 1fr);



row-gap属性与column-gap属性与gap属性
row-gap属性设置行间距 column-gap属性设置列间距


gap是上面两个属性的缩写：第一个值为列间距 第二个值为行间距
Tips：如果只写一个值，则表示列间距与行间距都为那个值。

grid-template-areas 属性
grid-template-areas属性用于定义区域,需要配合子元素内的属性grid-area一起使用。作用就是可以自由布局。并且为区域增添语义。如：


注意箭头位置。当名称对应的时候赋予名称的子元素可以获得相应的布局。布局必须每行都要填写对应数量的名称否则，会出现一个两列的布局。(对应数量：第一行设置了多少区域名称，后面再写行的时候就要加多少区域名称) 如下面案例：



.item { font-size: 2em; text-align: center; border: 1px solid white; } .item-1 { grid-area: header; background-color: red; } .item-2 { grid-area: menu; background-color: orange; } .item-3 { grid-area: main; background-color: green; } .item-4 { grid-area: right; background-color: blue; } .item-5 { grid-area: footer; background-color: pink; } #container { border: 1px solid black; display: grid; grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer'; }-----------------------------HTML <div id="container"> <div class="item item-1">Header</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-5">5</div> </div>



grid-auto-flow 属性

• 划分网格以后(1.设置grid-template-columns属性和grid-template-rows以后)，容器的子元素会按照顺序自动放置在每一个网格内。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行
  
• 而这个顺序，是由grid-auto-flow属性决定的，它有两个值一个是默认值row先行后列,另一个column是将子元素排序变为先列后行*
  
• 除了上面两个值外还有row dense和column dense;
  [dense adj.密度大的；稠密的]
  从意思可以看出他们会让元素紧密的排列。在特殊情况下这两个值尤为好用。row dense:列宽固定，尽可能地填满空隙；column dense:行高固定，尽可能地填满空隙；
  

`justify-items` 属性与`align-items`属性与`place-items`属性
它们值都相同： |值名称|功能| |---|---| |start|对齐单元格的起始边缘。| |end|对齐单元格的结束边缘。| |center|单元格内部居中。| |stretch|拉伸，占满单元格的整个宽度（默认值）。| - `justify-item`属性设置元素在一个单元格内容的水平位置； - 如果子元素未设置宽时，则该属性值为`start`或`center`或`end`的时候元素的宽度将显示内容宽度，并相对应**左中右**对齐，属性值为`strech`的时候，元素的宽度将铺满区域。 - 如果子元素设置宽时，则可以很明显看到元素的左中右对齐，但是strech则不会将已设置宽度的盒子拉开，设置的宽度还是保持原样。 - `align-items`属性设置元素在一个单元格内容的垂直位置； - ……未设置高度以内容高度为基准的上中下对齐 - 设置高度保存高度的同时并上中下对齐 - strech依旧会把整个单元格占满，除了设置高度的元素所处的单元格外。 两个属性值写法完全相同

• place-items属性是align-items属性和justify-items属性的合并简写形式.其第一个值为align-items第二个值为justify-item；如果只写一个值，则浏览器认为两个值相等。

justify-content 属性与align-content属性与place-content属性
它们的值也都相同：

值名称	作用

• start值会让以排序好的内容块为一个整体，对齐起始边框

• end值会让以排序好的内容块为一个整体，对齐结束边框

• center值会让**以排序好的内容块为一个整体*，居中对齐

• stretch值在元素大小没有指定的时候(使用grid-template-areas布局时)，元素会铺满整个父盒子
• space-around值是每个元素两侧的间隔相等。所以元素之间的间隔比元素与父盒子边框的间隔大一倍。但是注意，如果没有宽度，则会以内容宽度为基准分布，如果那一列都没有内容，则那一列不会显示。

• space-between值是元素与元素之间间隔相等，但是元素与父盒子边框之间没有距离

• space-evenly值是元素与元素之间以及元素与边框之间的距离相等。

以上都是以justify-content举例，align-content与justify-content基本一致，只是将水平方向改为了垂直方向罢了。 place-content属性是align-content与justify-content的缩写合并：第一个值为align-content第二个值为justify-content。 如果省略第二个值，则浏览器会认为这两个属性的值相等。
grid-auto-columns属与grid-auto-rows属性
grid-auto-columns属与grid-auto-rows属性的使用场景是，当在设置的时候网格只设置三行，但是项目所需要的行数超出了设置的行数时grid-auto-rows会自动补出超出行的行高。grid-auto-rows同理。
grid-template属性与grid属性

• grid-template属性是grid-template-columns、grid-template-rows和gird-template-areas这三个属性的简写。
• grid是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性简写。

没事少用这俩，不好看
Grid元素属性

元素属性名	作用

以上就是Grid元素内可以出现的属性了，如果对某个元素的属性还是不理解，可以继续向下看。
grid-column-start属性
grid-column-end属性
grid-row-start属性
grid-row-end 属性
为什么要把这四个属性放在一起写呢？ 因为这四个属性控制着元素的四个边框所定位的网格线。

• grid-column-start属性与grid-column-end属性控制着元素根据[列]网格线的开始与结束，这两个值可以改变该元素的列宽。

改变该元素之后，其他元素因为没有特殊设置而继续跟在1号元素后面按照父元素的grid-auto-flow属性进行排列。

• grid-row-start属性与grid-row-end属性控制着元素根据[行]网格线的开始与结束，这两个值可以改变该元素的行高。

改变该元素之后，其他元素因为没有特殊设置而继续跟在2号元素后面按照父元素的grid-auto-flow属性进行排列。

• Tips1：当父元素使用grid-template-columns与grid-template-rows为每一个列宽与行高设置自定义属性名的时候，grid-column-start与grid-column-end可以设置对应属性名来操作元素的列宽。grid-row-start与grid-row-end同理。

• Tips2:这四个值有一个值：span关键字，该值设置之后，后面加空格加数字即可代表元素横跨几（行/列）

• Tip3:当两个元素的位置完全一样，会发生重叠，可以使用z-index设置显示的元素。

grid-column属性与grid-row属性
子元素里面的：

• grid-column属性是grid-column-start和grid-column-end的简写形式
• grid-row属性是grid-row-start属性和grid-row-end的简写形式

它们值的书写格式


.item { grid-column: <start-line> / <end-line>; grid-row: <start-line> / <end-line>;}开始与结束位置中间是必加的/，而不是代表或的意思，不加/的话该属性无法生效。

---

• Tips:如果只写一个值，则会占据对应的单元格。

• 当两个属性都写一个值时，后面元素会自动补到没有元素的地方去。

grid-area属性
grid-area属性与父元素的gird-template-areas配合使用。 可以根据父元素内自定义的区域名，与子元素设置相对应的grid-area值来进行布局。


此外grid-area属性还可以用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的简写形式，它可以直接定位位置 其格式：


.item { grid-area: <row-start> / <column-start> / <row-end> / <column-end>;}规律先开始后结束，先行后列。justify-self属性align-self属性place-self属性

• justify-self属性与justify-items用法完全一致，不同点就是justify-self属性只作用于一个元素。
• align-self同理。
• place-self属性是align-self属性和justify-self属性的简写形式，其格式为：

place-self: <align-self> <justify-self>;

---

建了一个前端小白交流群，私信我，进入交流群。我会给大家分享我收集整理的各种学习资料，组织大家一起做项目练习，帮助大家匹配一位学习伙伴互相监督学习，欢迎加入


作者：我不是臭虫
链接：前端必备！！！响应式布局0基础看完这篇文章也能学会！学完直接起飞！！！
来源：稀土掘金