黑马程序员技术交流社区
标题: 移动端布局常见的几种布局 [打印本页]
作者: 男女有别 时间: 2019-4-25 17:16
标题: 移动端布局常见的几种布局
移动端布局常见的几种布局
一．流式布局（百分比布局）
通过给宽度设置为百分比，让页面随着屏幕的缩放而缩放，只给宽设置百分比，高度给固定值。
例：
body {
min-width: 320px;
max-width: 640px;
width: 640px;（一定要给固定的宽度，不然页面在移动端显示不正确）
margin: 0 auto;
} 宽度和最大宽度根据需求来定；
二 flex布局（弹性布局...）
1. 作用：通过给父盒子添加flex属性，来控制子元素的位置和排列方式。
2. 给父级盒子添加的属性
2.1】display: flex 使用flex属性；
flex-direction 控制子元素的排列方向 （主轴和侧轴 一般默认x轴为主轴）；
flex-direction: column 设置y轴为主轴；
flex-direction:column-reverse 设置y轴为主轴，并子元素从下往上排列；
flex-direction: row; 设置x轴为主轴 一般默认是这个 不用特别设置；
flex-direction: row-reverse;设置x轴为主轴 并子元素从右往左排列；
2.2】justify-content 设置子元素在主轴上的排列方式
justify-content: flex-start； 子元素从头部开始排列；
justify-content: flex-end; 子元素从尾部开始排列；
justify-content: center; 在主轴居中对齐
justify-content: space-between; 先两边贴边 ，再平均分配剩余空间；
justify-content: space-around;平分剩余空间；
2.3】子元素在侧轴上的排列方式 align-items: （单行时使用）
align-content: （多行时使用）
比justify-content 多一个streth：拉伸，平分父元素高度。
2.4】子元素是否换行
flex-wrap: wrap; 换行
flex-wrap: nowrap; 不换行 （默认值）
2.5】flex-flow: row wrap; 是flex-direction 和 flex-wrap 属性的复合属性
3 给子元素添加的属性
3.1】flex属性 用来定义子项元素占容器多少份数的值
Flex：数值；
3.2】 align-self: 子元素在侧轴上的排列方式
3.3】order 定义子项元素的排列顺序
Order：数值； 数值越大 排列越靠前；
三 rem布局
将页面中的px值换算成rem值，rem取决于html中的font-size的值
通常配合媒体查询，并在html结构里引入flexible.js。
媒体查询：
例：
@media sreen and (min-width:640px) {
html {
font-size: 64px;
}
} 表示在屏幕尺寸大于等于640px时 html的字体大小始终是64px；
四 响应式布局
1. 作用：利用媒体查询 针对不同宽度的设备进行布局和设置样式，从而适配不同的设备；
2. 使用：一般结合Bootstrap来使用，在html例引入bootstrap.min.css。在bootstrap.min.css默认将页面分成1~12等份；并将屏幕尺寸划分为大屏>=1200px 中屏992~1200 小屏768~992 超小屏<=768;
Col-xs-份数 表示在超小屏下所占份数；
Col-md-份数 表示在中屏下所占份数；
Col-sm-份数 表示在小屏下所占份数；
Col-lg-份数 表示在超大屏下所占份数；
Hidden-xs 在超小屏下隐藏；
Hidden-sm 在小屏下隐藏；
.........
Col-lg-offset-3 在大屏下盒子向右偏移三份；
.......................
Col-lg-md-push-1 在大屏下 盒子推出一份距离
Col-lg-md-pull-1 在大屏下 盒子拉出一份距离
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |