网页响应式设计

媒体查询：

@media (max-width: 100px) { / CSS Rules / }

当设备的高度小于等于 800px 时，p 标签的 font-size 为 10px。

@media (max-width: 800px) { 
  p{
    font-size:10px;
  }
 }

图片自适应

用 CSS 来让图片自适应其实很简单。 你只需要给img元素添加这些属性，只能是img标签 ，换成div不行:

img {
  max-width: 100%;
  height: auto;
}

文本排版自适应

除了使用 em 或 px 设置文本大小，你还可以用视窗单位来做响应式排版。 视窗单位和百分比都是相对单位，但它们是基于不同的参照物。 视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。

四个不同的视窗单位分别是：

●vw：如 10vw 的意思是视窗宽度的 10%。
●vh： 如 3vh 的意思是视窗高度的 3%。
●vmin： 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
●vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。

例如：h2 标签的 width 设置为视窗宽度的 80%，将段落的 width 设置为视窗高度和宽度中较小值的 75%。

<style>
h2{
  width:80vw;
}
p{
  width:75vmin;
}
</style>

弹性盒子

用一个div包裹多个div元素，在父元素中css代码添加 display：flex 即可，默认按照行排列

常用属性：

属性	描述
display	指定HTML的元素盒子类型为flex
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴方向上的对齐方式
align-items	设置弹性盒子元素在交叉轴（与主轴垂直）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

flex-direction

只要给父元素添加 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。其他可选值：

• row-reverse ：行逆排列
• column-reverse ：列逆排序

justify-content

给父元素添加，可以改变其对齐方式，可选属性值：

• center ：居中
• flex-start ：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 justify-content 的值，那么这就是默认值。
• flex-end ：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。
• space-between ：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
• space- around ：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
• space-evenly ：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。

align-items

弹性容器中，与主轴垂直的叫做 cross axis（交叉轴）。 行的交叉轴是垂直的，列的交叉轴是水平的。

CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说，定义的是元素的上下对齐方式； 对列来说，是定义元素的左右对齐方式。

• flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。
• flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。
• center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。
• stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值，那么这就是默认值。
• baseline：沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线。

flex-wrap

在弹性盒子父元素中添加，可以将子元素换行展示，可选值：

• nowrap：默认值，不换行。
• wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
• wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列

flex-shrink

在子元素中添加，当弹性容器太小时，子元素会自动缩小。当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。比如，一个项目的 flex-shrink 属性值为 1，另一个项目的 flex-shrink 属性值为 3，那么后者相比前者会受到 3 倍压缩。

flex-grow

与 flex-shrink 相对的是 flex-grow。如果一个项目的 flex-grow 属性值为 1，另一个项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩大 3 倍。

flex-basis

为子元素设置了初始值，例如flex-basis:20em;

flex

flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一并设置。

例如，flex: 1 0 10px;

order

设置子元素的顺序，属性值如1，2，3…

align-self

在子元素中设置，这个属性允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素。 因为 float、clear 和 vertical-align 等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。align-self 可设置的值与 align-items 的一样，并且它会覆盖 align-items 所设置的值。

CSS网格

用来弹性布局，比如换成手机设备，自动调整布局。

网格的单位

在 CSS 网格中，可以使用绝对单位（如 px）或相对单位（如 em）来定义行或列的大小。 下面的单位也可以使用：

fr：设置列或行占剩余空间的比例，

auto：设置列宽或行高自动等于它的内容的宽度或高度，

%：将列或行调整为它的容器宽度或高度的百分比，

grid-template-columns: auto 50px 10% 2fr 1fr;

这段代码添加了五个列。 第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。

设置行列

grid-template-columns

在一个网格容器中使用 grid-template-columns 属性。属性值的个数表示网格的列数，每个值表示相应的列宽度。

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

上述代码即是两列网格，且每列宽度为50px

grid-template-rows

与grid-template-columns同理，设置行的数和行宽。

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

minmax函数

内置函数 minmax 也可用于设置 grid-template-columns 和 grid-template-rows 的值。 它的作用是在网格容器改变大小时限制网格项的大小。 为此，你需要指定网格项允许的尺寸范围。 例如：

grid-template-columns: 100px minmax(50px, 200px);

设置了两行，第一行100px宽，第二行最小值50px，最大200px

repeat函数

以下为添加 100 行网格的例子，每行高度均为 50px：

grid-template-rows: repeat(100, 50px);

你还可以用 repeat 方法重复多个值，并在定义网格结构时与其他值一起使用。 比如：

grid-template-columns: repeat(2, 1fr 50px) 20px;

效果相当于：

grid-template-columns: 1fr 50px 1fr 50px 20px;

注意：1fr 50px 重复了两次，后面跟着 20px。

auto-fill弹性布局

repeat 方法带有一个名为自动填充（auto-fill）的功能。 它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill 和 minmax 来更灵活地布局。

repeat(auto-fill, minmax(60px, 1fr));

auto-fiit弹性布局

auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。

对比如下，左侧为auto-fill，右侧为auto-fit

网格的间距

设置列的间距：grid-column-gap: 10px;

设置行的间距：grid-row-gap: 10px;

同时设置（行间距10px， 列间距20px）：grid-gap:10px 20px;

网格单元的空间大小

网格中，假想的水平线和垂直线被称为线（lines）。 这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。

要设置一个网格项占据几列，你可以使用 grid-column 属性加上网格线条的编号来定义网格项开始和结束的位置。如下例子，将5号项目占用线2-4的位置

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}

  .item5 {
    background: PaleGreen;
    /* 只修改这一行下面的代码 */
    grid-column: 2 / 4;
    /* 只修改这一行上面的代码 */
  }

  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

要设置一个网格项占据几行，你可以使用 grid-row属性加上网格线条的编号来定义网格项开始和结束的位置。添加代码：grid-row:2/4

简写方式：grid-area: 2/2/4/4;

grid-area: 开始水平线 / 开始垂直线 / 结束水平线 / 结束垂直线;

效果如图：

空间对齐

justify-self

CSS 网格中，每个网格项的内容分别位于被称为单元格（cell）的框内。 使用网格项的 justify-self 属性，设置其内容的位置在单元格内沿水平轴的对齐方式。 默认情况下，这个属性的值是 stretch，这将使内容占满整个单元格的宽度。 该 CSS 网格属性也可以使用其他的值：

• start：使内容在单元格左侧对齐
• center：使内容在单元格居中对齐
• end：使内容在单元格右侧对齐

align-self

设置单元格内容垂直上的对齐，可使用值与 justify-self一样

justify-items

水平对齐所有单元内容，在父元素中使用。

align-items

垂直对齐所有单元格的内容，在父元素中使用

网格模板

通过文本设置模板，将父元素划分为多个网格区域，可以让单位网格对应在某一个区域中。

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}

  .item5 {
    background: PaleGreen;
    /* 只修改这一行下面的代码 */
    grid-area: footer;  

    /* 只修改这一行上面的代码 */
  }

  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas:
      "header header header"
      "advert content content"
      "footer footer footer";
  }
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

首先在父元素中设置grid-template-areas，然后在子元素中设置grid-area: footer; 即可让该单位对应到指定区域。效果如下，让item5到底部去：

使用媒体查询创建响应式布局

<style>
  .item1 {
    background: LightSkyBlue;
    grid-area: header;
  }

  .item2 {
    background: LightSalmon;
    grid-area: advert;
  }

  .item3 {
    background: PaleTurquoise;
    grid-area: content;
  }

  .item4 {
    background: lightpink;
    grid-area: footer;
  }

  .container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "header"
      "advert"
      "content"
      "footer";
  }

  @media (min-width: 300px){
    .container{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "advert header"
        "advert content"
        "advert footer";
    }
  }

  @media (min-width: 400px){
    .container{
      grid-template-areas:
      /* 只修改这一行下面的代码 */
        "header header"
        "advert content"
        "footer footer";
      /* 只修改这一行上面的代码 */
    }
  }
</style>

<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">content</div>
  <div class="item4">footer</div>
</div>

当网页可视区域的宽不小于 400px 时，请让 header 区域完全占据最顶行，footer 区域完全占据最底行: