A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 男女有别 中级黑马   /  2019-4-25 17:16  /  900 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

移动端布局常见的几种布局
一.流式布局(百分比布局)
通过给宽度设置为百分比,让页面随着屏幕的缩放而缩放,只给宽设置百分比,高度给固定值。
例:
body {
min-width: 320px;
max-width: 640px;
width: 640px;(一定要给固定的宽度,不然页面在移动端显示不正确)
margin: 0 auto;
}   宽度和最大宽度根据需求来定;
flex布局(弹性布局...
1. 作用:通过给父盒子添加flex属性,来控制子元素的位置和排列方式。
2. 给父级盒子添加的属性
2.1display: 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.5flex-flow: row wrap;  flex-direction flex-wrap 属性的复合属性
3 给子元素添加的属性
3.1flex属性  用来定义子项元素占容器多少份数的值
     Flex:数值;
3.2align-self: 子元素在侧轴上的排列方式
3.3order 定义子项元素的排列顺序               
Order:数值;  数值越大 排列越靠前;
rem布局
将页面中的px值换算成rem值,rem取决于html中的font-size的值
通常配合媒体查询,并在html结构里引入flexible.js
媒体查询:
例:
@media sreen and (min-width:640px) {
html {
font-size: 64px;
}
}  表示在屏幕尺寸大于等于640pxhtml的字体大小始终是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   在大屏下 盒子拉出一份距离

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马