移动WEB开发

 

移动端基础

兼容移动端主流浏览器，处理webkit内核浏览器即可。

 

 

移动端调试方法

 

· Chrome DevTools(谷歌浏览器)的模拟手机调试
· 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器。
· 使用外网服务器，直接IP或域名访问

 

1.移动web开发之流式布局

 

1.1 视口

 

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

 

 

1.1.1理想视口 ideal viewport(常用)

 

需要手动添加meta视口标签同时浏览器操作

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no,width=device-width" />

 

 

 

1.2 二倍图

1.2.1 物理像素&物理像素比

 

· PC端页面，1个px等于1个物理像素，但是移动的就不尽相同

· 一个px的能显示的物理像素点的个数，成为物理像素比或屏幕像素比

 

注：以上数据均参考自https://material.io/devices/

 

 

1.2.2背景缩放 background-size

 

background-size属性规定背景图像的尺寸

 

background-size：背景图片宽度 背景图片高度;

 

· 单位：长度|百分比|cover|contain;

· cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域

· contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

 

 

2.移动端技术解决方案

 

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

私有前缀只需要考虑添加webkit即可。

 

2.1 css初始化 normalize.css

 

移动端css初始化推荐使用normalize.css

 

·Normalize.css:保护了有价值的默认值

·Normalize.css:修复了浏览器的bug

·Normalize.css:是模块化

·Normalize.css:拥有详细的文档

 

官网地址：http://necolas.github.io/normalize.css

2.2 css3盒子模型 box-sizing

 

· 传统模式宽度计算：盒子的宽度 = css中设置的width + border + padding

· css3盒子模型：      盒子的宽度 = css中设置的宽度width里面包含了border和padding 也就是说，我们的css3中的盒子模型，padding和border不会撑大盒子了

 

选择传统 or css3盒子模型？

 

· 移动端可以全部css3盒子模型

· PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择css3盒子模型

 

 

2.3 特殊样式

 

 

 

3. 移动端常见布局

 

 

3.1 流式布局（百分比布局）

 

 

 

3.2 二倍精灵图的做法

 

· 在ps里面把精灵图等比例缩放为原来的一半

· 之后根据大小测量坐标

· 注意代码里面background-size也要写：精灵图原来宽度的一半

 

4.flex布局

 

4.1 flex布局原理

 

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

 

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

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

 

4.2 常见父项属性

 

4.2.2 属性值

 

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

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

 

justify-content属性

flex-wrap 属性

flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放在父元素里面
flex-wrap:wrap 设置自动换行

align-items属性

 

 

align-items:stretch 拉伸 （子盒子不能设置高度 否则没有效果）

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

 

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

 

align-content 和 align-items 区别

 

· align-items 适用于单行情况下，只有上对齐、居中和拉伸

· align-content 适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。

· 总结就是单行找align-items 多行找align-content

flex-flow 属性

 

是flex-direction 和flex-wrap 属性的符合属性

flex-flow：row wrap;

 

4.3 flex布局子项常见属性

 

· flex子项占的份数

· align-self 控制子项自己在侧轴的排列方式

· order属性定义子项的排列顺序（前后顺序）

4.3.1 flex属性

 

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

 

.item{

flex:<number>;默认是0

}

4.3.2 align-self 控制子项自己在侧轴上的排列方式

 

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

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

 

 

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

 

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

注意：和z-index不一样。