怎么调整响应式布局

前端工作过程中为了更好的用户体验，经常需要调整响应式布局，这篇就总结一下调整响应式布局的几种方法

1. 百分比布局
将窗口宽高设置成100%，里面盒子的大小根据设计图置换成相应的百分比
缺点：计算困难，要定义一个元素的宽高，都要按照设计稿换成百分比。

2. 使用媒体查询（css@media）

@media screen and (min-width: 401px) and (max-width: 600px) {
        body {
            background-color: orange;
        }
    }

通过设置宽度区间来调整响应式布局，如上图代码，当视图宽度在401px到600px之间时，就执行body内的样式代码，可以结合栅格系统（grid-area）一起使用。
缺点：需要写的css样式太多
注意：IE6、7、8不支持这种响应式布局

3. rem响应式布局
rem的大小是根据html根元素的font-size的值动态计算的，例如：html{ font-size:100px; }，那么1rem就等于100px，后续直接修改根元素的font-size的值就可以了。
在开发过程中，我们通常按照某一个固定尺寸来开发，当代码全部写完以后，可以通过vscode的插件 px to rem 来实现自动转换，也可以通过flexible.js插件来实现。

4. vw、vh响应式布局
100vw = 视图窗宽度
100vh = 视图窗高度
当视图窗宽度为750px时，1vw = 7.5px
在开发过程中，我们通常按照某一个固定尺寸来开发，当代码全部写完以后，可以通过vscode的插件 px to rem 来实现自动转换。

5. flex弹性盒子布局（Flexible Box）
弹性布局是一种十分方便的布局方式，只需要依赖于 CSS 样式来实现，也是用到最多的一种响应式布局方法。

.box{
    display:flex;
    display: inline-flex;   //行内元素也可以弹性布局
}

webkit内核的浏览器必须要加上 -webkit 前缀（如safari）

.box{
    display: -webkit-flex;
}

在父元素（容器）上，常用到的弹性布局属性有：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。

flex-direction: row | row-reverse | column | column-reverse
//主轴的方向：从左往右布局 ｜ 从右往左布局 ｜ 从上往下布局 ｜ 从下往上布局

flex-wrap: nowrap | wrap | wrap-reverse
//是否换行（列）：不换行（列） ｜ 从左到右换列，从上到下换行 ｜ 从下到上换行，从右到左换列

flex-flow: 是flex-direction和flex-wrap的简写，默认值为 row nowrap

justify-content: flex-start | flex-end | center | space-between | space-around
//主轴上的对齐方式：左对齐 ｜ 右对齐 ｜ 居中 ｜ 两端对齐 ｜两端对齐且两侧间隔相同

align-items: flex-start | flex-end | center | baseline | stretch
//交叉轴上对齐方式：上对齐 ｜ 下对齐 ｜ 局中 ｜ 与第一行文字基线对齐 ｜ 占满屏幕

alingn-center: flex-start | flex-end | center | space-between | space-around | stre
//多根轴线的对齐方式：左上｜ 左下 ｜ 左中 ｜ 上下两端对齐 ｜ 上下两端对齐且上下间隔相同 ｜ 满屏

在子元素（项目）上，常用到的弹性布局属性有：order，flex-grow，flex-shrink，flex-basis，flex，align-self。

order: 项目的排序，数值越小，排列越靠前，默认为0.
flex-grow: 项目的放大比例，默认为0.
flex-shrink: 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，负值对该属性无效，当值为0时，不收缩。
flex-basis: 项目占据主轴空间，默认为auto。
flex: 是flex-grow、flex-shrink、flex-basis的简写，默认值0 1 auto.
align-self: 单个项目与其他项目不一样的对齐方式，可覆盖align-items属性，默认值auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch.

以上就是5种响应式布局方式的总结，当然还有很多细节内容我没有写，大家自行百度吧。