|
移动端布局常见的几种布局 一．流式布局（百分比布局） 通过给宽度设置为百分比，让页面随着屏幕的缩放而缩放，只给宽设置百分比，高度给固定值。 例： 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 在大屏下 盒子拉出一份距离
| 
收藏
淘帖
踩
