移动WEB开发

兼容性

移动端的浏览器基本都是基于webkit内核制作，主要需要考虑webkit内核的兼容性。

在需要的css属性前加-webkit-

视口

布局视口

视觉视口

理想视口

宽度为浏览阅读的最佳宽度

需要设置<meta>标签让布局视口=理想视口

• <meta>视口标签

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

多倍图

物理像素点&物理像素比

• 物理像素点 指屏幕显示的最小颗粒
• 物理像素比 指1px可以显示物理像素点的个数 由于物理像素比的存在，会使同一张图在移动端打开会变模糊，多倍图就是解决问题的方法

使用方法

使用像素大的图片进行缩放

/* 2倍图 */
.box{
	/* 原始图100*100px */
	background-size: 50px 50px;
}
img{
	/* 原始图100*100px */
	width: 50px;
	height: 50px;
}

制作移动WEB方案

• 单独制作（主流）
• 响应式

制作移动WEB技术选型

流式布局(百分比)

1. 高度定死,宽度设置成百分比自适应
2. 对于大的轮播图等,宽度100%自适应
3. 对于小图标或者文本,一般都是固定宽高大小

流式布局的缺点: 对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长

解决方法rem+媒体查询

flex弹性布局

布局原理：通过给父盒子添加display:flex;,来控制子盒子的位置。

属性：

属性	说明
flex-direction	决定主轴的方向（即项目的排列方向）
flex-wrap	如果一条轴线排不下，如何换行。
flex-flow	flex-direction属性和flex-wrap属性的简写形式
justify-content	定义了项目在主轴上的对齐方式。
align-items	项目在交叉轴上如何对齐。
align-content	定义了多根轴线的对齐方式
详细内容	www.ruanyifeng.com/blog/2015/0…

rem布局（less+rem+媒体查询）

rem(root em):相对单位，相对html的字体大小。 媒体查询：

//@media查询针对不同屏幕尺寸设置不同样式
@media screen and (屏幕尺寸) {
  css样式
}