响应式布局笔记

2017-10-15

1. 适应不同的视口

<meta name="viewport" content="width=device-width， maximum-scales=3,minimum-scale=0.5"/>
<meta name="viewport" content="width=device-width,initial-scales=1.0, user-scalable=no"/>禁止用户缩放

2. 图片自适应

<link rel="stylesheet" href="css/styles.css">
 img{
    max-width:100%
    }

此处不用width：100%是因为图片不会考虑自身固有宽度，只会根据父元素宽度设置，如果父元素宽度大于图片宽度，则图片会被拉伸变模糊。

3.媒体查询

a.在link标签中组合使用媒体查询

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px), projection" href="style.css">

b.在css中使用媒体查询

@import与媒体标签

@import url（“phone.css”） screen and (max-width:360px);

但要注意的是：这样会增加HTTP请求，影响加载速度，慎用。

css与媒体查询

@media screen and (min-width: 50em){
/*样式*/
}

4.Flexbox弹性盒子布局

出现的必要性：使用行内块来布局的问题是会在块儿之间形成空白。

<nav>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</nav>

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

解决办法：

1.改为列表形式

2.设置右边距为负值

3.设置父字体大小为零

弹性盒子布局更加灵活地解决了行内框、表元、浮动布局的局限性。

Flex基本概念

弹性盒布局的容器（flex container）指的是采用了弹性盒布局的 DOM 元素，而弹性盒布局的条目（flex item）指的是容器中包含的子 DOM 元素。图中的最外围的边框表示的是容器，而编号 1 和 2 的边框表示的是容器中的条目。

在使用时，通过 CSS 属性声明首先定义主轴的方向（水平或垂直），则交叉轴的方向也相应确定下来。

主轴确定了容器中每一行上条目的排列方向，而交叉轴则确定行本身的排列方向。

主轴尺寸和交叉轴尺寸，分别对应其 DOM 元素在主轴和交叉轴上的大小。

基本属性

flex-direction ：

flex-direction：row/ row-reverse/ column/ column-reverse

flex-wrap

flex-wrap：nowrap/ wrap/ wrap-reverse

flex-flow
结合上面两个属性

flex-flow：row wrap;

order

.flex-item:last-child {
order: -1;
}

条目尺寸的弹性属性

flex属性

条目尺寸的弹性由 3 个 CSS 属性来确定，分别是“flex-basis”、”flex-grow”和”flex-shrink”，简写为flex属性。

1.假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto

2.当 flex 取值为 none，则计算值为 0 0 auto

3.当 flex 取值为 auto，则计算值为 1 1 auto

4.当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%

5.当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）

6.当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%

7.当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1

flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况：

auto：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。

content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。

百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。

举一个不同的值之间的区别：

<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>

<style type="text/css">
.parent {
    display: flex;
    width: 600px;
}
.parent > div {
    height: 100px;
}
.item-1 {
    width: 140px;
    flex: 2 1 0%;
    background: blue;
}
.item-2 {
    width: 100px;
    flex: 2 1 auto;
    background: darkblue;
}
.item-3 {
    flex: 1 1 200px;
    background: lightblue;
}
</style>

主轴上父容器总尺寸为 600px

子元素的总基准值是：0% + auto + 200px = 300px，其中

0% 即 0 宽度
auto 对应取主尺寸即 100px
故剩余空间为 600px - 300px = 300px

伸缩放大系数之和为： 2 + 2 + 1 = 5

剩余空间分配如下：

item-1 和 item-2 各分配 2/5，各得 120px
item-3 分配 1/5，得 60px
各项目最终宽度为：
item-1 = 0% + 120px = 120px
item-2 = auto + 120px = 220px
item-3 = 200px + 60px = 260px
当 item-1 基准值取 0% 的时候，是把该项目视为零尺寸的，故即便声明其尺寸为 140px，也并没有什么用，形同虚设

而 item-2 基准值取 auto 的时候，根据规则基准值使用值是主尺寸值即 100px，故这 100px 不会纳入剩余空间。

条目对齐属性

对齐条目的方式有 3 种

1.使用自动空白边，即”margin: auto”，即容器中额外的空白空间会被声明为 auto 的空白边占据。

<div class="flex-container">
  <div class="logo">Logo</div>
  <div class="profile">Profile</div>
</div>
.flex-container {
  display: flex;
}
.profile {
  margin-left: auto;
}

2.在主轴方向上的对齐，通过容器上的”justify-content”属性来进行设置

justify-conetnt:
flex-start/ flex-end/ center/ sapce-between/ space-around

“justify-content”属性不同值的布局效果

3.在交叉轴方向上的对齐，通过容器上的”align-items”来进行设置

align-items: flex-start/ flex-end/ center/ baseline/ stretch

属性“align-items”不同值的布局效果

4.而条目上的属性”align-self”用来覆写容器指定的对齐方式。

align-self: flex-start/ flex-end/ center/ baseline/ stretch

属性“align-items”不同值的布局效果

交叉轴空白处理

当容器在交叉轴方向上有空白空间时，属性”align-content”用来对齐容器中的行

该属性的作用类似于”justify-content”，只不过”justify-content”是在主轴方向上对齐行中的条目。当容器中只有单行时，该属性不起作用.

align-content:flex-start/ flex-end/ center/ space-between/ space-around stretch

属性“align-content”的不同值的布局效果

浏览器支持

浏览器一共支持 3 个不同版本规范的语法：

新规范：最新版本规范的语法，即”display: flex”。

中间版本：2011 年的非官方规范的语法，即”display: flexbox”。

老规范：2009 年的规范的语法，即”display: box”。

总结

作为 CSS3 规范的一部分，弹性盒布局模型可以在很多典型的场景中简化完成布局所需的 CSS 代码。该布局模型也提供了很多实用的特性来满足常见的布局要求，包括对容器中条目的排列、对齐、调整大小和分配空白空间等。弹性盒布局模型可以作为 Web 开发人员工具箱中的一个很好的工具。