移动端开发

学习内容：移动端开发选择；移动端技术解决方案，移动端常见布局

学习笔记：

移动端开发选择

单独移动端页面（主流）

通常情况下，网址域名前加m（mobile）可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

响应式兼容PC移动端

通过判断屏幕宽度来改变样式，以适应不同终端。

缺点：制作麻烦，需要花很大精力去调兼容性问题

移动端技术解决方案

移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题

我们可以放心使用H5标签和CSS3样式

同时我们浏览器的私有前缀我们只需要考虑添加webkit即可

CSS初始化 normalize.css

 

CSS3 盒子模型 box-sizing

传统盒子模型： 盒子的宽度= CSS中设置的width+border+padding

CSS3盒子模型： 盒子的宽度= CSS中设置的width里面包含了border和padding

也就是说，我们的CSS3中的盒子模型，padding和border不会撑大盒子，在移动端用C3，在PC端需要看是否考虑兼容性问题

语法：

box-sizing：border-box；

 特殊样式

 移动端常见布局

流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。主要看宽度

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

流式布局方式是移动端web开发使用的比较常见的布局方式。

·max-width 最大宽度（max-height 最大高度）

·min-width 最小宽度 （min-height 最小高度）

flex布局

布局原理

flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的的灵活性，任何一个容器都可以指定为flex布局。

当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

伸缩布局= 弹性布局= 伸缩盒布局=弹性盒布局=flex布局。

采用flex布局的元素，称为Flex容器，它的所有子元素自动成为容器成员，称为flex项目。

也就是说，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

flex布局父项常见属性

1.flex-direction 设置主轴的方向 

1.1 主轴与侧轴（行和列、X轴和Y轴）

默认主轴方向是X轴方向，水平向右

默认侧轴方向是Y轴方向，水平向下

1.2  属性值

flex-direction 属性决定主轴的方向（排列方向）

注意： 主轴和侧轴是会变化的，flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

 1.3 justify-content  设置主轴上的子元素排列方式

justify-content 属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是哪个

 1.4 flex-wrap 设置子元素是否换行

默认情况下，项目都在一条轴上。flex-wrap属性定义，flex布局中默认是不换行的。

属性值有两个

nowrap	默认值，不换行
wrap	换行

1.5 align-items 设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴的排列方式 在子项为单项的时候使用

flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（默认值）

1.6 align-content 设置侧轴上的子元素排列方式（多行）

该属性是控制子项在侧轴的排列方式 只能在子项为多行（出现换行）的时候使用，在单行时是没有效果的

flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
stretch	子项在侧轴平分剩余空间
space-around	子项在侧轴先分布在两头，再平分剩余空间
space-between	设置子项元素高度平分父元素高度

1.7 flex-flow

flex-flow是flex-wrap和flex-direction的复合属性

语法：

flex-flow： row wrap；

把两个属性合在一起，相当于简写。 

flex布局子项常见属性

flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

语法：

.item {

flex: <number>;  (数字)

}

align-self 

控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

 语法：

span：nth-child（1） {

/*设置自己在侧轴上的排列方式*/

align-self： flex-end；

}

 order

order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。