web app 入门教程第一章基础知识

学习了前端知识，当然是不能错过web app的学习咯。

什么是web app

是指基于Web的系统和应用，需要技术有html5，css3，javascript，

优点：

1.开发成本低
2.适配多种移动设备成本低
3.跨平台和终端
4.迭代更新容易
5.无需安装成本

缺点：

1、WebApp自身能力不全面

2、无法调用语音、摄像头、定位等能力，体验比较差；

3、用户很难沉淀下来，建立较为稳固的联系。

像素

px：逻辑像素，一般为浏览器使用的单位

dp,pt：物理像素，与设备无关

dpr：像素比，

计算公式： 1px = (dpr)^2 * dp

ppi：ppi越高图像越清晰，但可视度越高，放缩比越低，所以出现了高清的屏幕，图标偏小的现象。

ppi为240的其dpr是1.5；320的是2.0；更高的就大于2.0了

viewport视图

visual viewport：窗口viewprot，

layout viewport：布局viewport，常用

viewport最佳meta标签：

width：设置viewport的值，如device-width是设备宽度

initial-scale：初始缩放，最好为1

minimum-scale：最小缩放

maximun-scale：最大缩放

user-scalabel：用户能否缩放，一般为no

我们用一款手机做例子，分辨率为1334*750

准备一张分辨率也为1334*750的图片，看看效果

明明就是一样的分辨率，为什么拖拽图片后出现空白区域，原因就是px和dp，dpr的关系，

使用viewport最佳mate后效果

flexbox弹性盒子布局

使用方法，父元素定义使用弹性布局display:-webkit-flex;

子元素设置缩放比如 flex:num;

不定宽高水平垂直居中

justify-content:center;
align-items:center;
display:-webkit-flex;

几个常用的布局：

效果图：

代码：（打开注解可以看到更多的效果，至于美观需要自己微调）

    
    
    
    


	
Flex弹性布局
	

		

			
设置固定宽度
			
flex: 2;
			
flex: 1;
		
	
	

	

		

			
width:100px
			
width:200px
			
width:300px
		
	

该资源中还有很多布局，下载地址：http://download.csdn.net/detail/qq_19558705/9328477

更多干货等你来拿 http://www.itit123.cn/