学习内容:移动端开发选择;移动端技术解决方案,移动端常见布局
学习笔记:
移动端开发选择
单独移动端页面(主流)
通常情况下,网址域名前加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。