因为学到了前端知识，当然不能错过web app的学习。
什么是网络应用程序？ 是基于web的系统和APP应用程序。 所需的技术有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。
视口显示(视口)窗口(视口、布局)视口、常用视口优化元标记元名称='视口' content=' width iid user-scalable=no'/meta width :设备宽度initial-scale :设置viewport的值，例如作为初始缩放的设备宽度。 1最小缩放：最小缩放最大缩放：最大缩放用户- SCA标签：用户是否可以缩放，一般以否的手机为例。 提供分辨率为1334*750、分辨率为1334*750的图像，看看效果吧
至于为什么拖动图像时会出现空白区域，由于px与dp、dpr的关系，使用viewport优化mate会有很好的效果
！ doctypehtmlhtmlheadmetacharset=' utf-8 ' metaname=' viewport ' content=' width=设备- width，inital-scale=1， }/style/headbodyimgsrc=' img/BG.jpg ' width=' 750 ' height=' 1334 '//body/html
使用flexbox弹性方块布局、定义父元素使用弹性布局display:-webkit-flex； flex:num等子元素的缩放； 不定宽度高度水平垂直中央justify-content:center； align-items3360中心； display:-webkit-flex；
几种常见布局：效果图：
代码：(打开注释可以看到更多的效果。 关于外观，需要自己进行微调()！ doctypehtmlhtmlheadmetacharset=' utf-8 ' metaname=' viewport ' content=' width=设备- width，inital-scale=1， } body { font-family : ' Microsoft雅黑'； font-size: 14px； color: #fff； (Li )文本修饰：无； 浮点：左； 显示： block； width:100%； }/* flex start *.flex { display :-WebKit-flex； flex-direction:row； //* flex-direction : row-reverse； 横线逆序*//*flex-direction:column； 垂直*//* flex-direction : column-reverse； 垂直逆序*/justify-content:center； *//*flex-start、flex-end、space-between和space-around */align-items 3360 center； *//*flex-start，flex-end，baseline，stretch *.*对齐内容3360 flex-start； flex-end，baseline，stretch，space-between，space-around */}.flex.item1{ width 3360100 px； 背景色： green； } .flex .item2{flex:2； 背景色：彩色流蓝色； } .flex .item3{flex:1； 背景色： # EFA 198； }/* flexend *//* flex-row start *.flex-wrap { display :-WebKit-flex； -webkit-flex-wrap: nowrap； *//* -维基百科- flex-wrap : wrap； 溢出//- WebKit-flex-wrap : wrap-reverse； 逆序溢出*/width: 400px； }.flex-wrap.item1{ width :100 px； 背景色： green； }.flex-wrap.item2{ width :200 px； 背景色：彩色流蓝色； }.flex-wrap.item3{ width :300 px； 背景色： # EFA 198； (/) flex-rowend (/style/headbodyh2flex柔性布局/H2 divclass=' demo1' ul class=' flex ' Li class=' item1'固定宽度//Li/ul/div br/div class=' demo2' ul class=' flex-wrap ' Li class=' item1' width 3360100 px/Lili class=' item2'
这个资源还有很多布局。 下载地址： http://download.csdn.net/detail/QQ _ 19558705/9328477我正在等你带来更干的商品。 http://www.itit123.cn/