如何实现响应式布局-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何实现响应式布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

响应式布局是指同一个页面在不同屏幕尺寸下有不同的布局。

1.媒体查询

媒体查询是最基础的实现响应式的方式
使用@media关键字
媒体查询是阶梯性的，不连续，没有完全响应

2.使用百分比、rem、vw、vh等相对单位来设置元素的宽度、高度、字体大小等

1.rem与em

rem(root em) 是相对于根元素（通常是标签）的字体大小。适用于全局缩放和响应式布局.
em 是相对于父元素的字体大小。具有继承性，适用于局部尺寸的调整。

2.vw、vh、vmax、vmin

先来了解下网页视口相关：

屏幕的宽度和高度：window.screenWidth、window.screenHeight
网页视口的宽度和高度：window.innerWidth 、 window.innerHeight
body的宽度和高度：document.body.clientWidth、document.body.clientHeight

如何实现响应式布局,前端CSS/HTML面试题,前端

网页视口的高度=100vh
网页视口的宽度=100vw
vmax 取vh和vw两者的最大值
vmin 取vh和vw两者的最小值所以1vh是网页视高度的百分之一，1vw是网页视口宽度的百分之一

3.Flexbox

主轴（Main Axis）、交叉轴（Cross Axis）、Flex容器（Flex Container）：包含Flex项目的容器。、Flex项目（Flex Item）

设置Flex属性：使用Flex属性来控制Flex项目在主轴和交叉轴上的行为。

/* 容器属性 */

.container {
    /* 定义为flex布局 */
    display: flex; /* 或 inline-flex */

    /* 主轴的方向 */
    flex-direction: row; /* 默认值，从左到右。还可以是row-reverse、column或column-reverse */

    /* 是否换行 */
    flex-wrap: nowrap; /* 默认值，不换行。还可以是wrap或wrap-reverse:当项目无法放在同一行时，它们会从容器的底部开始并向上堆叠 */

    /* flex-direction 和 flex-wrap 的简写 */
    flex-flow: row nowrap; 

    /* 主轴上的对齐方式 */
    justify-content: flex-start; /* 默认值，左对齐。还可以是flex-end(右对齐)、center(中心对齐)、space-between(平分空间，左右顶边)、space-around(两侧空间是中间一半)或space-evenly(两侧空间等于中间) */

    /* 交叉轴上的对齐方式 */
    align-items: stretch; /* 默认值，项目被拉伸以适应容器的交叉轴宽度。还可以是flex-start、flex-end(从交叉轴底部排列)、center(交叉轴中间排列)或baseline */

    /* 多行的交叉轴上的对齐方式 */
    align-content: stretch; /* 默认值，行之间拉伸。也可为flex-start、flex-end、center、space-between或space-around */

}

/* 项目属性 */

.item {
    /* 排列顺序 */
    order: 0; /* 默认值。可以是任何整数 */

    /* 放大比例 */
    flex-grow: 0; /* 默认值。定义在分配多余空间时，项目的放大比例 */

    /* 缩小比例 */
    flex-shrink: 1; /* 默认值。定义在减少空间时，项目的缩小比例 */

    /* 初始大小 */
    flex-basis: auto; /* 默认值。初始大小 */

    /* 上述三个属性的简写 */
    flex: 0 1 auto; /* 使用flex-grow, flex-shrink 和 flex-basis的默认值 */
	flex: 1 1 0%; /* flex:1缩写 让所有Item平均分配剩余空间*/
    /* 单个项目的对齐方式 */
    align-self: auto; /* 默认值，与继承容器的align-items值。还可以是flex-start、flex-end、center、baseline或stretch。控制交叉轴单独布局，没有与之对应的单独控制主轴的布局，除非换grid方法或加margin */
}

flexbox计算题

问题1:
你有四个项目，宽度分别为100px、150px、200px和250px，其flex-shrink值分别为2、1、3和0。
如果需要在这四个项目之间减少总共300px的空间，每个项目会减少多少像素？
解：
项目1的缩小比例为 2/6 = 1/3
项目2的缩小比例为 1/6
项目3的缩小比例为 3/6 = 1/2
项目4不会缩小，因为它的flex-shrink值为0。

项目1会减少：300px * 1/3 = 100px
项目2会减少：300px * 1/6 = 50px
项目3会减少：300px * 1/2 = 150px
项目4不会缩小。

最后宽度加上flex-basis

实现一个响应式布局：一个父盒子，里面三个子盒子，左右固定在两侧，固定宽高200px ，中间盒子响应式，有多少种实现方法，给出代码

响应式布局可以通过多种方式实现。以下列举了几种常用的方法来实现所描述的布局：

1. 使用Flexbox

.parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.child-left,
.child-right {
    width: 200px;
    height: 200px;
    flex-shrink: 0; /* 防止缩小 */
}

.child-center {
    flex-grow: 1; /* 允许增长以填充剩余空间 */
    height: 200px;
}

2. 使用Grid

.parent {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
}

.child-left,
.child-right,
.child-center {
    height: 200px;
}

3. 使用浮动

.child-left,
.child-right {
    width: 200px;
    height: 200px;
    float: left;
}

.child-center {
    margin-left: 200px;
    margin-right: 200px;
    height: 200px;
}

4. 使用定位 (不推荐，因为中间内容可能会被两边的内容遮挡)

.parent {
    position: relative;
}

.child-left,
.child-right {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
}

.child-left {
    left: 0;
}

.child-right {
    right: 0;
}

.child-center {
    padding-left: 200px;
    padding-right: 200px;
    height: 200px;
}