移动端布局常见的几种布局 一.流式布局(百分比布局) 通过给宽度设置为百分比,让页面随着屏幕的缩放而缩放,只给宽设置百分比,高度给固定值。 例: 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 在大屏下 盒子拉出一份距离
|