9.17学习笔记

移动端页面设计规范

1.手机页面的PSD文件上面标注的是PX单位,iPhone6为标准

2.我们编写代码的时候,推荐使用rem+px.

3.通常会加一段JS代码,根据当前设备宽度动态调节font-size的大小

4.rem单位的元素也会随之变化(rem表示HTML标签上font-size的倍数)

 

弹性伸缩盒子

父标签{display:flex;}

子标签1{flex:1;}

子标签2{flex:2;}

/*将父标签的宽度分成3份,孩子1占1份,孩子2占2份.高度默认占满*/

 

flex-direction （排列的方向）

父标签{

display:flex;

flex-direction:row; /*从左到右排列（默认）*/

flex-direction:row-reverse;/*从右到左排列*/

flex-direction:column;/*从上到下排列*/

flex-direction:column-reverse;/*从下到上排列*/

}

 

justify-content(水平方向)

父标签{

justify-content:flex-start; /*左对齐(不是绝对的)*/

justify-content:flex-end; /*右对齐(不是绝对的)*/

justify-content:center; /*居中*/

justify-content:space-between;/*两端对齐*/

justify-content:space-around; /*两端对齐且两端有间距*/

}

 

align-items(垂直方向)

父标签{

align-items:flex-start; /*顶部*/

align-items:flex-end; /*底部*/

align-items:stretch; /*拉伸(占满)*/

align-items:baseline; /*基线对齐*/

align-items:center; /*居中*/

}