响应式布局方法

单位方法

使用css单位来适应屏幕

rem

与根节点的字体大小有关，比如 html 节点的字体为16px 则2rem 表示2*16=32px；所以使用时要监听屏幕事件 resize 还随时更改html的字体大小。

em

与父节点的字体大小有关，比如最近的父节点的字体为16px 则2rem 表示2*16=32px；最近的父节点指的时最近的设置了position属性的节点(BFC)

vw

与当前屏幕宽度大小有关，比如当前屏幕宽度大小为1000px，50vw 则表示0.5*1000=500px.

vh

与当前屏幕高度大小有关，比如当前屏幕高度大小为1000px，50vh 则表示0.5*1000=500px.

%

与父节点的对应属性有关，比如父节点的宽度大小为1000px，width：50% 则表示0.51000=500px.比如父节点的字体大小为32px，fontsize：50% 则表示0.532=16px.

函数方法

calc

font-size: calc(100% - 10px)

calc 能动态计算当前值。

clamp

clamp(MIN, VAL, MAX)

font-size: clamp(16px, 5vw, 32px)

clamp 能动态计算当前值。

媒体查询

@media

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

布局方法

弹性布局Flex

display:flex

flex:1 时在主轴上填充

弹性布局练习

绝对布局absolute

position:absolute;
top:10px;
bottom:10px;
left:10px;
right:10px;

该节点当父节点变化时也会跟着变化，且每个边都离父节点10像素。