前端工作过程中为了更好的用户体验,经常需要调整响应式布局,这篇就总结一下调整响应式布局的几种方法
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种响应式布局方式的总结,当然还有很多细节内容我没有写,大家自行百度吧。